Scraipt NPM | npm.io

Scraipt

Installation

To install Scraipt, run the following command in the root of your project directory:

npm install scraipt

Usage

To use Scraipt, you must have an OpenAI API key. Add the following to your .env file or create a new file called .env in the root of your project if you don't already have one:

OPENAI_API_KEY=your-api-key

Webpack

If your project does not already have a webpack configuration, create a new file called webpack.config.js in the root of your project.

Add the following to your webpack.config.js file (Replacing "// ..." with your existing configuration):

// ...
module.exports = {
	// ...
	module: {
		rules: [
			{
				test: /.[jt]sx*/,
				use: ['scraipt'],
			},
		],
	},
	// ...
};
// ...

create-react-app

If you are using create-react-app, you can use the craco package to add Scraipt to your project.

First, install craco if you haven't already:

npm install @craco/craco

Then, create a new file called craco.config.js in the root of your project if you don't already have one.

Add the following to your craco.config.js file (Replacing "// ..." with your existing configuration):

// ...
module.exports = {
	// ...
	webpack: {
		configure: {
			module: {
				rules: [
					{
						test: /.[jt]sx*/,
						use: [
							{
								loader: 'scraipt',
								options: {
									include: ['src'],
								},
							},
						],
					},
				],
			},
		},
	},
	// ...
};
// ...

Finally, update your package.json file to use craco instead of react-scripts by replacing the start, build, test, and eject scripts with the following

{
	"scripts": {
		"start": "craco start",
		"build": "craco build",
		"test": "craco test"
	}
}

You can now run npm start and npm run build as you normally would, and Scraipt will optimize your code.

Configuration

To configure Scraipt, add an options array to your webpack.config.js or craco.config.js file.

Example

// ...
module.exports = {
	webpack: {
		configure: {
			module: {
				rules: [
					{
						test: /.[jt]sx*/,
						use: [
							{
								loader: 'scraipt',
								options: {
									// <-- Add this
									include: ['src'], // Only include files in the "src" directory
									dryRun: true, // Run Scraipt without optimizing the code
								},
							},
						],
					},
				],
			},
		},
	},
	// ...
};
// ...

Options

include <Array>
- An array of directories to include in the optimization process. If using create-react-app, you may only want to include the src directory.
- Default: All files in the project directory.
- Example: ['src'] or if useGlob is enabled: ['**/src/*.js']
dryRun <Boolean>
- Run Scraipt without optimizing the code. This is useful for testing Scraipt without modifying your code. This will also print the names of the files that would be optimized.
- Default: false
- Example: true
model <String>
- The OpenAI model to use.
- Default: gpt-4
- Example: gpt-3.5-turbo
maxTokens <Number>
- The maximum number of tokens to use in total for all functions.
- Default: No limit
- Example: 1000
debug <Boolean>
- Write the optimized code to the build folder.
- Default: false
- Example: true
buildPath <Array>
- The path to write the optimized debug code to.
- Default: dist
- Example: build
useGlob <Boolean>
- Use glob patterns in the include option.
- Default: false
- Example: true

Functional Usage

Scraipt can also be used easily with a functional approach. To do so, import useScraipt from the scraipt library and call it with your webpack configuration.

useScraipt(webpackConfig <optional Object>, options <optional Object>, framework <optional String>) => WebpackConfig

webpackConfig <optional Object>
- Your webpack configuration.
- Default: {}
options <optional Object>
- The options to use with Scraipt. See Configuration for a list of available options.
- Default: {}
framework <optional String>
- Can be React, or webpack.
- The framework you are using. Scraipt will try and automatically detect the framework you are using from the provided config, however, if it cannot, you can pass the framework as the third argument.
- Default: Autodetect

Example

const { useScraipt } = require('scraipt');

module.exports = useScraipt(
	{
		// ... Your webpack configuration
	},
	{
		model: 'gpt-3.5-turbo',
	},
	'webpack'
);

Ignoring Functions

If you would like to ignore a function from being optimized, add the following comment to the line above the function:

// scraipt-ignore

Example

// scraipt-ignore
function fibonacci(n) {
	if (n <= 1) return n;
	return fibonacci(n - 1) + fibonacci(n - 2);
}

The fibonacci function will not be optimized by Scraipt.

Building

To build Scraipt from source, run the following commands in the root of the project directory:

Clone the repository:

git clone https://github.com/cadenmarinozzi/Scraipt.git

cd into the project directory:

cd Scraipt

Install dependencies:

npm install

Build the project for either development or production:

npm run build-dev # Development (Uses tsc)

npm run build-production # Production (Uses webpack)

Testing

To run the tests, run the following command in the root of the project directory:

npm run test

This will run eslint on the project, build the project and run the example apps. If the tests do not complete successfully, something is wrong.

If you receive an OpenAI API key not found error, add your .env file to each test project in example-apps.

After running the tests, you will see the generated code in the <buildPath>/scraipt directory.

Potential Issues

Scraipt is a new tool and may not work with all codebases. If you encounter any issues, please open an issue on the GitHub repository.
Scraipt uses AI to optimize code, therefore issues may arise from the AI's generated code. Such as, but not limited to, invalid output/logic/variables, infinite loops, etc.