@vindo/cli 0.0.1 → 0.0.3

package/bin/builder/development.js

@@ -0,0 +1,9 @@
+/**
+ * Live reload
+ */
+(function({origin}) {
+  (new EventSource(origin)).onmessage = function() {
+    location.reload()
+  }
+})
+(new URL(document.currentScript.src))

package/bin/builder/index.js

@@ -0,0 +1,240 @@
+
+const es = require('esbuild')
+const sass = require('sass')
+const util = require('../util')
+const config = require('../config')
+
+
+module.exports = exports = Object.create(util, {
+	config: {
+		value: config
+	}
+})
+const {file, string, resolve} = util
+
+
+/**
+ * Get basename
+ * @param {string} file
+ */
+function getname(val) {
+	return file.path.parse(val).name
+}
+
+
+/**
+ * Get chunk
+ * @param {string} dir 
+ */
+async function getChunk(dir) {
+	var code = []
+	var files = await file.readdir(dir, {recursive: true})
+
+	for(var {name, parentPath} of files) {
+		if(!/\.(js|tsx|jsx)$/.test(name)) {
+			continue
+		}
+
+		var name = getname(name)
+		if(name) {
+			var _file = file.path.join(parentPath, name)
+
+			if(name == 'index') {
+				_file = parentPath
+				name = getname(parentPath)
+			}
+			code.push(`import ${name} from '${_file}'`, `data.${name} = ${name}`)
+		}
+	}
+	return code
+}
+
+
+/**
+ * Get imported files
+ * @param {object} opt 
+ * @param {string} data 
+ */
+async function getImports(entry, data) {
+	var imp = []
+	var matches = data.matchAll(/import\s(.*)\sfrom.*('|"|\/)([a-zA-Z0-9_-]+)('|")/g)
+
+	for(var item of matches) {
+		if(/(\.\/|)components\//.test(item[0])) {
+			imp.push(`var ${item[1]} = ${item[3]}`)
+		}
+		else if(/(\.\/)/.test(item[0])) {
+			imp.push(item[0].replace(/('|")(\.\/)/, `$1${resolve.dirname(entry)}/`))
+		}
+		else {
+			imp.push(item[0])
+		}
+	}
+	return imp
+}
+
+
+/**
+ * Get all imports from components directory
+ * @param {object} opt 
+ */
+async function getComponents(opt) {
+	var data = []
+	
+	if(Array.isArray(opt.includes)) {
+		for(var item of opt.includes) {
+			const dir = file.path.resolve(process.cwd(), 'node_modules', item)
+			if(!file.exists(dir)) {
+				continue
+			}
+			data = data.concat(await getChunk(dir))
+		}
+	}
+
+	return data.concat(await getChunk(opt.components))
+}
+
+
+/**
+ * Collect components and assemble before building
+ * 
+ * @param {object} opt option
+ */
+async function startBuild(opt) {
+
+	if(!file.exists(opt.entry)) {
+		throw new Error(`Entry file not found. "${opt.entry}"`)
+	}
+	
+	const data = file.read(opt.entry)
+	const temp = file.read(opt.template)
+	
+	const impo = await getImports(opt.entry, data)
+	const comp = await getComponents(opt)
+
+	const code = string.replace(temp, {
+		REACT_COMPONENTS: comp.join('\n'),
+		IMPORTED_COMPONENTS: impo.join('\n'),
+		HEAD_COMPONENT: data.match(/<head.*>((.|\n)*)<\/head>/g)[0],
+		BODY_COMPONENT: data.match(/<body.*>((.|\n)*)<\/body>/g)[0]
+	})
+
+	await file.promises.writeFile(opt.chunk, code, {flag: 'w'})
+}
+
+
+/**
+ * Create a bundle file
+ * 
+ * @param {object} opt option
+ */
+async function startBundle(opt) {
+
+	if(!file.exists(opt.chunk)) {
+		return
+	}
+
+	const build = await es.build({
+		...opt.settings,
+		minify: opt.minify,
+		outfile: opt.outfile,
+		entryPoints: [opt.chunk],
+	})
+	const meta = Object.keys(build.metafile.outputs)[0]
+
+	/**
+	 * Append bundle hash to vindo config
+	 */
+	const name = opt.bundleName
+	const hash = await config.bundle(opt.name ?? name, [meta.match(/-(.*).js/)[1], name])
+	/**
+	 * Delete old bundle
+	 */
+	const files = file.readdir(resolve.root(opt.output))
+	files.forEach((item) => {
+		const matched = item.name.match(
+			new RegExp(`^${name}-([A-Z0-9+]{8})\.js$`)
+		)
+		if(matched) {
+			if(hash == matched[1]) {
+				return
+			}
+			file.unlink(file.path.resolve(item.parentPath, item.name))
+		}
+	})
+
+	if(file.exists(opt.chunk)) {
+		file.unlink(opt.chunk)
+	}
+}
+
+
+/**
+ * Compile scss file
+ * @param {object} opt 
+ */
+async function startCompile(opt) {
+	if(!opt.compileSass) {
+		return
+	}
+	const input = resolve.root(opt.compileSass.input)
+	const output = resolve.root(opt.compileSass.output)
+
+	/**
+	 * Create output dir if not exists
+	 */
+	if(!file.exists(input)) {
+		throw new Error(`No sass input directory found. "${input}"\n`)
+	}
+	
+	/**
+	 * Create output dir if not exists
+	 */
+	if(!file.exists(output)) {
+		await file.makedir(output)
+	}
+
+	function scss(name) {
+		return resolve.root(opt.compileSass.input, name)
+	}
+
+
+	const files = await file.readdir(input)
+	for(var item of files) {
+		
+		if(item.isFile()) {
+			const url = scss(item.name)
+			
+			if(file.exists(url)) {
+				const css = sass.compile(url).css
+
+				const out = resolve.root(
+					output,
+					item.name.replace(/\.scss/, '.css')
+				)
+				await file.promises.writeFile(out, css, {flag: 'w'})
+			}
+		}
+	}
+}
+
+
+/**
+ * 
+ * @param {object} config 
+ */
+exports.build = async function build(opt) {
+	/**
+	 * Create build directory
+	 */
+	await file.makedir(resolve.root(opt.output))
+
+	try {
+		await startBuild(opt)
+		await startBundle(opt)
+		await startCompile(opt)
+	}
+	catch(e) {
+		console.log(e)
+	}
+}

package/bin/{server.js → builder/server.js}

@@ -2,8 +2,8 @@ const {parse} = require('node:path')
 const {createServer} = require('node:http')
 
 
-module.exports = function(cb) {
 
+function server(cb) {
   return createServer((req, res) => {
     const url = parse(req.url)
 
@@ -37,7 +37,38 @@ module.exports = function(cb) {
     }
     res.headers({'Access-Control-Allow-Origin': '*'})
 
-    
+
     cb(req, res)
   })
+}
+
+
+module.exports = function(builder, cb) {
+  var file = builder.file
+  var events = builder.events
+  var resolve = builder.resolve
+  var option = builder.config.option
+
+  /**
+   * Run development server and create bundle
+   */
+  const http = server(async function(req, res) {
+    const data = await file.read(resolve.clidir('builder/development.js'))
+
+    if(req.isStream()) {
+      events.on('change', () => {
+        res.write(`data: {changed: true}\n\n`)
+      })
+    }
+
+    if(req.is('development')) {
+      res.headers({
+        'Content-Type':
+        'application/javascript'
+      })
+      res.end(data)
+    }
+  })
+
+  http.listen(option.port, cb)
 }

package/bin/builder/template.js

@@ -0,0 +1,43 @@
+
+import React from 'react'
+import * as client from '@vindo/react/client'
+
+/**
+ * This will be the holder of all components that will be imported
+ */
+const data = {}
+
+/**
+ * Template for components to be imported
+ */
+{REACT_COMPONENTS}
+{IMPORTED_COMPONENTS}
+
+
+data.Link = client.Link
+
+
+if(data.head || data.body) {
+  throw new SyntaxError(`Component name '${data.head ? 'head' : 'body'}' is a reserved name for SSR client components.`)
+}
+
+data.head = function head(meta) {
+  const {props:{children}} = React.cloneElement((
+    {HEAD_COMPONENT}
+  ))
+  return children
+}
+
+data.body = function body({meta}) {
+  var {props:{children}} = React.cloneElement(({BODY_COMPONENT}))
+
+  if(!Array.isArray(children)) {
+    children = React.Children.toArray(children)
+  }
+
+  return React.Children.map(children, (child, key) => {
+    return React.cloneElement(child, {key, ...arguments[0]})
+  })
+}
+
+client.render(document, data)

package/bin/config.js

@@ -1,58 +1,120 @@
-const {file} = require('@vindo/utility')
+const util = require('./util')
+const option = require('./option')
 
 
-const port = 2001
-const args = {}
-const argv = process.argv
+const file = util.file
+const object = util.object
+const resolve = util.resolve
+const parseArgs = util.parseArgs
 
 
-const vindo = file.read(file.join(process.cwd(), 'vindo.json'))
+/**
+ * Exports
+ */
+module.exports = exports = Object.create({}, {
+	args: {get: getArgs},
+  option: {get: getOption},
+})
 
 
-for(var i in argv) {
-	const pat = /^([a-z-]+)=/
+var path = resolve.root('vindo.json')
+if(!file.exists(path)) {
+	throw Error(`vindo.json file does not exists.`)    
+}
+var vindo = file.get(path)
+
+
+/**
+ * To string
+ */
+function toStr(data) {
+	return Buffer.from(JSON.stringify(data)).toString('base64').replace(/=/g, '')
+}
+
+/**
+ * Get arguments
+ */
+function getArgs() {
+	const args = process.argv
 
-	if(i < 2) {
-		continue
+	const command = args[2]
+	if(!option.commands.includes(command)) {
+		throw new ReferenceError('You need to provide at least one command.')
 	}
-	var arg = argv[i].split(pat, 3).filter(String)
 
-	if(arg) {
-		args[arg[0].substring(2)] = arg[1] ? arg[1] : true
+  const {values} = parseArgs({
+    args: args.slice(3),
+    allowPositionals: true,
+    options: option.argsOptions,
+  })
+
+  return object.merge(values, {[command]: true, command})
+}
+
+
+/**
+ * Get build option and arguments
+ */
+function getOption() {
+	var opt = object.merge(option.buildOptions, vindo.buildOptions)
+	var opt = object.merge(opt, getArgs())
+
+	return {
+		...opt,
+		name: vindo.name,
+		sass: option.sass,
+		settings: option.settings,
+
+		entry: resolve.root(opt.entry),
+		chunk: resolve.root(opt.output, 'chunk.jsx'),
+		template: resolve.clidir('builder', 'template.js'),
+		components: resolve.dirname(opt.entry, 'components'),
+		outfile: resolve.root(`${opt.output}/${opt.bundleName}.js`),
+		devScript: `http://127.0.0.1:${opt.port}/development`,
 	}
 }
 
 
-module.exports = {
-	/**
-	 * Development script
-	 */
-	get devScript() {
-		return `http://127.0.0.1:${this.option.port}/browser.js`
-	},
+/**
+ * Add bundle
+ */
+exports.add = function add(opt) {
+  if(opt.package) {
+		var pkg = resolve.current('node_modules', opt.package, 'vindo.json')
+    if(!file.exists(pkg)) {
+			return
+		}
+		
+		var pkg = file.get(pkg)
+    if(pkg) {
+      exports.bundle(null, pkg.bundles)
+    }
+  }
+}
+
 
+/**
+ * Add bundle metadata to vindo config
+ */
+exports.bundle = async function bundle(name, data) {
+	if(!vindo.bundles) {
+		vindo.bundles = {}
+	}
 	/**
-	 * Build Options
+	 * Add new bundle
 	 */
-	get option() {
-		const {buildOption} = JSON.parse(vindo)
-		
-		return Object.assign({port}, buildOption, {
-			...args,
-			output: typeof args.output == 'string' ? args.output : buildOption.output,
-		})
-	},
-
+	if(name) {
+		vindo.bundles[name] = toStr(data)
+	}
 	/**
-	 * Console log color pattern
+	 * Merge to existing bundles
 	 */
-	pattern: {
-		ref: {color: 'cyan', pat: /(<.*>)/g, text: '$1'},
-		symbol: {color: 'green', pat: /(Symbol\(.*\))/g, text: '$1'},
-		undefined: {color: 'gray', pat: /(undefined)/g, text: '$1'},
-		function: {color: 'cyan', pat: /\[(.*)\]/g, text: '[$1]'},
-		boolean: {color: 'yellow', pat: /(false|true)/g, text: '$1'},
-		string: {color: 'green', pat: /('.*')/g, text: '$1'},
-		number: {color: 'yellow', pat: /:\s(-?\d+)/g, text: ': $1'},
+	else {
+		vindo.bundles = object.merge(vindo.bundles, data)
 	}
+	/**
+	 * Update the config file
+	 */
+	await file.promises.writeFile(path, JSON.stringify(vindo, null, 2), {flag: 'w'})
+	return data[0]
 }

package/bin/index.js

@@ -1,79 +1,39 @@
 #! /usr/bin/env node
 
 
+const builder = require('./builder')
+const server = require('./builder/server')
 
-const {file} = require('@vindo/utility')
-const {exec, spawn} = require('node:child_process')
-const {watch:watcher} = require('chokidar')
-const {styleText:color} = require('node:util')
+const kill = require('tree-kill')
+const chokidar = require('chokidar')
+const childProcess = require('node:child_process')
 
 
-var evt = {}
-var cwd = process.cwd()
 var child = null
-
-
-const build = require('./build')
-const server = require('./server')
-const {option, pattern, devScript} = require('./config')
+var log = builder.log
+var build = builder.build
+var config = builder.config
+var events = builder.events
+var colors = builder.colors
+var option = builder.config.option
 
 
 /**
  * Set to global environment
  */
-process.env.DEV_SERVER = devScript
-process.env.DEV_SERVER_PORT = option.port
-
-
-/**
- * Add event
- */
-function on(name, cb) {
-  evt[name] = cb
-}
-
-/**
- * Call the event
- */
-function emit(name, ...args) {
-  if(evt[name]) {
-    evt[name].call(...args)
-  }
-}
-
-/**
- * Log with colors
- */
-function log(name, text) {
-  if(name) {
-    return console.log(color(name, text.toString().trim()))
-  }
-  return console.log(text)
-}
-
-/**
- * 
- */
-function setColors(text) {
-  var text = text.toString()
-
-  for(var item of Object.values(pattern)) {
-    text = text.replace(item.pat, color(item.color, item.text))
-  }
-  return text.trim()
-}
+process.env.DEV_PORT = option.port
+process.env.DEV_SERVER = option.devScript
 
 
 /**
  * 
  */
-async function watch(dirs, cb) {
+async function watcher(dirs, cb) {
   try {
     if(!Array.isArray(dirs)) {
       throw TypeError('Expected a value of type `Array` but received a `String`.')
     }
-    watcher(dirs, {
-      // ignored: (path, stats) => stats?.isFile() && !path.endsWith('.js'), // only watch js files
+    chokidar.watch(dirs, {
       persistent: true
     })
     .on('change', (path) => cb({path}))
@@ -87,13 +47,18 @@ async function watch(dirs, cb) {
 /**
  * 
  */
-function execute() {
+function execute(cmd) {
   var i = 0
-  var sp = exec(option.execute, {
-    cwd,
-    env: process.env
+
+  if(Array.isArray(cmd)) {
+    cmd = cmd.join(' && ')
+  }
+
+  var sp = childProcess.exec(cmd, {
+    env: process.env,
+    cwd: process.cwd(),
   })
-  log('green', `[vindo] Running ${option.execute}`)
+  log('green', `[vindo] Running ${cmd}`)
 
   /**
    * Emit change event to reload client
@@ -105,9 +70,9 @@ function execute() {
      * It means the server runs successfully.
      */
     if(i == 1) {
-      emit('change')
+      events.emit('change')
     }
-    console.log(setColors(data))
+    console.log(colors.colorize(data))
   })
   
   /**
@@ -118,11 +83,11 @@ function execute() {
 
     for(var i in text) {
       if(i == 0) {
-        text[0] = color('red', text[0])
+        text[0] = colors.set('red', text[0])
       }
-      text[i] = text[i].replace(/(at.*)/, color('gray', '$1'))
-      text[i] = text[i].replace(/:\s('.*')/, color('green', ': $1'))
-      text[i] = text[i].replace(/\s(-?\d+)/, color('yellow', ' $1'))
+      text[i] = text[i].replace(/(at.*)/, colors.set('gray', '$1'))
+      text[i] = text[i].replace(/:\s('.*')/, colors.set('green', ': $1'))
+      text[i] = text[i].replace(/\s(-?\d+)/, colors.set('yellow', ' $1'))
     }
     log(null, text.join('\r\n'))
   })
@@ -134,58 +99,50 @@ function execute() {
  * Restart server and rebuild
  */
 function restart(event) {
-  log('gray', `[vindo] File changed '${event.path}'`)
+  log('green', `[vindo] File changed '${event.path}'`)
   log('green', `[vindo] Rebuilding...`)
   log('green', `[vindo] Restarting server...`)
 
-  if(option.output) {
-    build(option)
-  }
+  build(option)
+
   if(child) {
-    if(process.platform === 'win32') {
-      spawn('taskkill', ['/pid', child.pid, '/f', '/t'])
-    }
-    else {
-      child.kill('SIGINT')
-    }
+    kill(child.pid)
   }
-  child = execute()
+  child = execute(option.execute)
 }
 
 
 /**
- * Create server
+ * Start building and execute
  */
-const http = server((req, res) => {
-  if(req.isStream()) {
-    on('change', () => {
-      res.write(`data: {changed: true}\n\n`)
-    })
-  }
-
-  if(req.is('reload')) {
-    res.headers({
-      'Content-Type':
-      'application/javascript'
-    })
-    res.end(file.read(__dirname.concat('/reload.js')))
-  }
-})
-
+function start() {
+  build(option)
 
-
-http.listen(option.port, function() {
-  child = execute()
-
-  if(option.output) {
-    build(option)
-  }
+  child = execute(option.execute)
 
   if(option.watch) {
     log('yellow', '[vindo] v0.0.1')
     log('yellow', `[vindo] Watching at ${option.watch}`)
     log('yellow', `[vindo] Building at ${option.output}`)
 
-    watch(option.watch, restart)
+    watcher(option.watch, restart)
   }
-})
+}
+
+
+/**
+ * Command specific tasks
+ */
+switch(option.command) {
+  case 'add':
+    config.add(option)
+    break
+
+  case 'run':
+    server(builder, start)
+    break
+
+  case 'build':
+    build(option)
+    break
+}

package/bin/option.json

@@ -0,0 +1,46 @@
+{
+  "buildOptions": {
+    "port": 2001,
+    "minify": true,
+    "watch": [
+      "./src"
+    ],
+    "output": "./public",
+    "bundleName": "main"
+  },
+  "sass": {
+    "style": "compressed"
+  },
+  "settings": {
+    "bundle": true,
+		"metafile": true,
+    "format": "esm",
+    "jsx": "automatic",
+    "logLevel": "error",
+    "outfile": "dist/bundle.js",
+    "loader": {
+      ".js": "jsx",
+      ".jsx": "jsx",
+      ".ts": "tsx",
+      ".tsx": "tsx"
+    },
+    "entryNames": "[name]-[hash]",
+    "allowOverwrite": true,
+    "jsxImportSource": "react"
+  },
+  "commands": [
+    "run",
+    "add",
+    "build",
+    "bundle"
+  ],
+  "argsOptions": {
+    "add": {"type": "string"},
+    "port": {"type": "string"},
+    "package": {"type": "string"},
+    "output": {"type": "string"},
+    "mergeTo": {"type": "string"},
+    "execute": {"type": "string"},
+    "bundleName": {"type": "string"}
+  }
+}

package/bin/util/index.js

@@ -0,0 +1,112 @@
+const util = require('util')
+const {file, events, string, object} = require('@vindo/utility')
+
+
+/**
+ * Set colors
+ */
+const colors = {
+  set(name, text) {
+    return util.styleText(name, text)
+  },
+  colorize(text) {
+    var text = text.toString()
+    /**
+     * Console log color pattern
+     */
+    const  pattern = {
+      ref: {color: 'cyan', pat: /(<.*>)/g, text: '$1'},
+      string: {color: 'green', pat: /('.*')/g, text: '$1'},
+      symbol: {color: 'green', pat: /(Symbol\(.*\))/g, text: '$1'},
+      number: {color: 'yellow', pat: /:\s(-?\d+)/g, text: ': $1'},
+      boolean: {color: 'yellow', pat: /(false|true)/g, text: '$1'},
+      function: {color: 'cyan', pat: /\[(.*)\]/g, text: '[$1]'},
+      undefined: {color: 'gray', pat: /(undefined)/g, text: '$1'},
+    }
+
+    for(var item of Object.values(pattern)) {
+      text = text.replace(item.pat, util.styleText(item.color, item.text))
+    }
+    return text.trim()
+  }
+}
+
+/**
+ * Resolve path
+ */
+const resolve = {
+  /**
+   * Resolve either a root directory
+   * of where a command executed or the current working directory.
+   */
+  root(...args) {
+    var path = process.env.INIT_CWD
+    if(!path) {
+      path = process.cwd()
+    }
+    return file.path.resolve(path, ...args)
+  },
+  /**
+   * Resolve files of this cli package.
+   */
+  clidir(...args) {
+    return file.path.resolve(file.path.dirname(__dirname), ...args)
+  },
+  /**
+   * Resolve file from current directory.
+   */
+  dirname(path, ...args) {
+    if(!path) {
+      return
+    }
+    return resolve.root(file.path.dirname(path), ...args)
+  },
+  /**
+   * Resolve current working directory
+   */
+  current(...args) {
+    return file.path.resolve(process.cwd(), ...args)
+  },
+}
+
+/**
+ * Log with colors
+ */
+function log(name, text) {
+  if(name) {
+    return console.log(util.styleText(name, text.toString().trim()))
+  }
+  return console.log(text)
+}
+
+/**
+ * 
+ */
+file.makedir = async function makedir(path) {
+	try {
+    await file.promises.mkdir(path)
+	}
+	catch(e) {}
+}
+
+/**
+ * 
+ */
+file.unlink = async function unlink(path) {
+	try {
+    await file.promises.unlink(path)
+	}
+	catch(e) {}
+}
+
+
+module.exports = exports = Object.create(util, {
+  file: {value: file},
+  string: {value: string},
+  object: {value: object},
+  events: {value: events},
+})
+
+exports.log = log
+exports.colors = colors
+exports.resolve = resolve

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vindo/cli",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Command line for running vindo server and react SSR for development.",
   "main": "bin/index.js",
   "publishConfig": {
@@ -24,8 +24,10 @@
   },
   "homepage": "https://github.com/rmindo/vindo/tree/main/packages/cli",
   "dependencies": {
-    "@vindo/utility": "^0.0.6",
+    "@vindo/utility": "^0.0.13",
     "chokidar": "^4.0.3",
-    "esbuild": "^0.25.4"
+    "esbuild": "^0.27.3",
+    "sass": "^1.98.0",
+    "tree-kill": "^1.2.2"
   }
 }

package/bin/build.js

@@ -1,139 +0,0 @@
-
-const fs = require('fs')
-const path = require('node:path')
-const {file} = require('@vindo/utility')
-const {writeFile} = require('node:fs/promises')
-const {build:esbuild} = require('esbuild')
-
-
-const option = {
-	bundle: true,
-	format: 'esm',
-	logLevel: 'error',
-}
-
-
-/**
- * Resolve path
- */
-function resolve(...args) {
-	return path.resolve(process.cwd(), ...args)
-}
-
-
-/**
- * Directory name
- */
-function dirname(...args) {
-	return path.resolve(__dirname, ...args)
-}
-
-
-/**
- * Resolve alias in the bundle
- */
-function resolveAlias(buildPath) {
-	return {
-		name: 'resolve-alias',
-		setup(build) {
-			build.onResolve({filter: /.*/}, ({path}) => {
-				const build_ = /@build/
-
-				if(path.match(/^node_modules\//)) {
-					var absPath = resolve(path, 'index.js')
-
-					if(!file.exists(absPath)) {
-						absPath = resolve(path.concat('.js'))
-					}
-					return {path: absPath}
-				}
-				
-				if(path.match(build_)) {
-					return {
-						path: resolve(path.replace(build_, buildPath).concat('.js'))
-					}
-				}
-				return null
-			})
-		}
-	}
-}
-
-
-/**
- * Create a chunk of components
- * @param {object} conf 
- */
-async function chunk(conf) {
-	var imp = ''
-
-	const out = resolve(conf.output, 'chunk.js')
-	const dir = resolve(conf.entries)
-
-	
-	if(file.isDir(dir)) {
-		const dir_ = conf.entries.split('/')
-
-		const files = file.readdir(dir)
-		if(files.length == 0) {
-			return
-		}
-			
-		for(var item of files) {
-			const name = path.parse(item.name).name
-			if(name) {
-				imp += `import ${name}_ from '${dir_.slice(1).join('/')}/${name}'\n`
-				imp += `export const ${name} = ${name}_\n`
-			}
-		}
-	}
-	
-	await writeFile(out, imp, {flag: 'w'})
-	await esbuild({
-		...option,
-		outfile: out,
-		packages: 'external',
-		entryPoints: [
-			out
-		],
-		allowOverwrite: true
-	})
-
-	return out
-}
-
-
-/**
- * Create a bundle file
- * @param {string} outbundle
- * @param {object} conf
- */
-async function bundle(outbundle, conf) {
-	option.minify = conf.minify ?? false
-
-	const out = await chunk(conf)
-	await esbuild({
-		...option,
-		outfile: resolve(conf.output, outbundle),
-		entryPoints: [
-			dirname(outbundle)
-		],
-		plugins: [resolveAlias(conf.output)]
-	})
-
-	if(file.exists(out)) fs.unlinkSync(out)
-}
-
-
-/**
- * 
- * @param {object} conf 
- */
-module.exports = async function build(conf) {
-	try {
-		await bundle('bundle.js', conf)
-	}
-	catch(e) {
-		console.log(e)
-	}
-}

package/bin/bundle.js

@@ -1,83 +0,0 @@
-import * as chunk from '@build/chunk'
-
-import ReactDom from 'node_modules/react-dom/client'
-import {
-  createElement as element,
-  isValidElement as isValid,
-}
-from 'node_modules/react'
-
-
-const url = new URL(document.scripts.bundle.src)
-
-const hash = url.searchParams.get('hash')
-const port = url.searchParams.get('port')
-const name = url.searchParams.get('name')
-
-const get = fetch(
-  hash.concat('?',
-    (new URLSearchParams({name})).toString()
-  )
-)
-
-
-/**
- * Set element type
- */
-function children(data) {
-  if(isValid(data)) {
-    return data
-  }
-
-  if(!Array.isArray(data)) {
-    data = [data]
-  }
-  
-  return data.map((item, key) => {
-    const props = item.props
-
-    if(!props) {
-      return item
-    }
-    if(props.children) {
-      props.children = children(props.children)
-    }
-
-    if(!item.type) {
-      var name = props.name
-      if(!name) {
-        throw ReferenceError('Component name is not defined.')
-      }
-
-      const comp = chunk[name.toLowerCase()]
-      if(comp) {
-        return element.bind(null, comp)({...props, key})
-      }
-    }
-    return {...item, key, $$typeof: Symbol.for('react.transitional.element')}
-  })
-}
-
-
-/**
- * Get the props in the backend
- */
-async function map(res) {
-  var data = await res.json()
-  if(data) {
-    ReactDom.hydrateRoot(document.getElementById('root'), children(data))
-  }
-}
-get.then(map)
-
-/**
- * Live reload for development
- */
-function reload({origin}) {
-  if(port) {
-    (new EventSource(origin.replace(/\d+/, port))).onmessage = function() {
-      location.reload()
-    }
-  }
-}
-reload(location)

package/bin/reload.js

@@ -1,6 +0,0 @@
-function reload({origin}) {
-  (new EventSource(origin)).onmessage = function() {
-    location.reload()
-  }
-}
-reload(new URL(document.currentScript.src))