# Script Custom Module
A plugin written by Typescript to let developer compile ts,react,vue content in client side with native es module. No bundler, just with one CDN and 4 lines configuration, and you are ready to use your favorite ES javascript to prototype your new idea.
## Install
### Template Setup
- Install this package as a global or local npm dependency
- create and serve a testing project with default setting
- open browser with url `http://localhost:1234`
```bash
# as global
$ npm install -g script-custom-module
$ create-scm
$ serve-scm
# or as local
$ npm install script-custom-module
$ npx create-scm
$ npx serve-scm
```
### Manual Setup
Since this plugin is mainly used in client browser, simply install with CDN.
```html
```
## Quick Usage
### Setup Custom Scripts
use the `setup` method to initialize from specific entrypoint file, then all dependency will got auto registered to the `importmap`, so that we can easily import our dependency by just calling native `import` method
```html
```
> Notice: `setup` will parse dependency from specific entrypoint, and loop into its dependencies.
```js
// entrypoint: index.js
import { createApp } from 'vue';
import App from './App.vue';
import './index.css';
import './no.js';
createApp(App).mount('#app');
```
> Notice: from v4.0.0, you can now use relative path to import your local files. if you're still using absolute path like `/src/xxxx.js`, please change to relative path to avoid issues.
### Run up a local server to serve your static content
you can install [serve](https://www.npmjs.com/package/serve) or any other http service to run up a dev server for your folder.
## Commands
### create-scm [-t|--template=TEMPLATE] [PROJECT_DIR]
create a new scm project with template
- TEMPLATE: `react`, `vue`, default is `react`
- PROJECT_DIR: project directory, default is `scm-project`
### serve-scm {[-p|--port=PORT] [-h|--host=HOST]} [PROJECT_DIR]
serve a folder with native Nodejs server by host and port
- PORT: port number, default is `1234`
- HOST: hostname, default is `localhost`
- PROJECT_DIR: project directory, default is `scm-project`
## APIs
In `window.CustomScript`, we can use following methods & states.
### setup(options)
the core method to initialize this plugin.
```js
const { Loaders } = CustomScript;
CustomScript.setup({
// required, or provide
```
### Root Module Entry
if the `entry` in options is not provided, CustomScript will search for `
```
### Loader System - Custom Loader
If you want to compile your own file format, easily extend the `BasicLoader` class and define in your own.
```js
const { BasicLoader } = CustomScript;
class MyPHPLoader extends BasicLoader {
static transform(url: string, rawContent?: string) {
// This will request your file content where you import from
const content = rawContent ? rawContent : super.requestFile(url);
// handle your file content here
const code = '...';
return {
code,
moduleUrl: super.blob.createBlobUrl(code, 'text/javascript'),
}
}
static compile(rawCode: string) {
super.compileBase(rawCode, (filepath) => {
// your own test regexp
if (!/(\.php)$/i.test(filepath)) return;
const { moduleUrl } = MyPHPLoader.transform(filepath);
// write to dependency importmap
super.writeModuleUrl(filepath, moduleUrl);
});
}
}
```
then put your custom Loader inside `setup` options
```js
CustomScript.setup({
entry: 'src/index.jsx',
loaders: [
...CustomScript.defaultLoaders,
MyPHPLoader,
],
});
```
## Use Demos
For more use demos, please [refer here](https://github.com/johnnywang1994/custom-module/tree/master/test)
## Reference
This plugin is mainly inspired by [inline-module](https://www.npmjs.com/package/inline-module), just modified about the loader system.