@vindo/cli 0.0.1 → 0.0.2

package/bin/build.js

@@ -1,137 +1,170 @@
 
-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',
+const es = require('esbuild')
+const {
+	path,
+	read,
+	exists,
+	string,
+	unlink,
+	makedir,
+	resolve,
+	readdir,
+	promises,
 }
+= require('./util')
 
 
 /**
- * Resolve path
+ * Get basename
+ * @param {string} file
  */
-function resolve(...args) {
-	return path.resolve(process.cwd(), ...args)
+function getname(file) {
+	return path.parse(file).name
 }
 
-
 /**
- * Directory name
+ * Get imported files
+ * @param {object} opt 
+ * @param {string} data 
  */
-function dirname(...args) {
-	return path.resolve(__dirname, ...args)
-}
+async function getImports(entry, data) {
+	var imp = []
+	var matches = data.matchAll(/import\s(.*)\sfrom.*('|"|\/)([a-zA-Z_-]+)('|")/g)
 
-
-/**
- * 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
-			})
+	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
 }
 
 
 /**
- * Create a chunk of components
- * @param {object} conf 
+ * Get all codes from components
+ * @param {object} opt 
  */
-async function chunk(conf) {
-	var imp = ''
-
-	const out = resolve(conf.output, 'chunk.js')
-	const dir = resolve(conf.entries)
-
+async function getComponents(opt) {
+	var files = await readdir(opt.components, {recursive: true})
+	var files = files.filter(file => {
+		return /\.(tsx|jsx)$/.test(file.name)
+	})
 	
-	if(file.isDir(dir)) {
-		const dir_ = conf.entries.split('/')
+	var code = []
 
-		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`
+	for(var {name, parentPath} of files) {
+		var name = getname(name)
+		if(name) {
+			var file = path.join(parentPath, name)
+
+			if(name == 'index') {
+				file = parentPath
+				name = getname(parentPath)
 			}
+			code.push(`import ${name} from '${file}'`, `chunk.${name} = ${name}`)
 		}
 	}
+	return code
+}
+
+
+/**
+ * Collect components and assemble before building
+ * 
+ * @param {object} opt option
+ */
+async function build(opt) {
+	const data = read(opt.entry)
+	const temp = read(opt.template)
 	
-	await writeFile(out, imp, {flag: 'w'})
-	await esbuild({
-		...option,
-		outfile: out,
-		packages: 'external',
-		entryPoints: [
-			out
-		],
-		allowOverwrite: true
+	const impo = await getImports(opt.entry, data)
+	const comp = await getComponents(opt)
+
+	const code = string.replace(temp, {
+		CHUNK_IMPORTS: comp.join('\n'),
+		ENTRY_IMPORTS: impo.join('\n'),
+		HEAD_COMPONENT: data.match(/<head.*>((.|\n)*)<\/head>/g)[0],
+		BODY_COMPONENT: data.match(/<Provider.*>((.|\n)*)<\/Provider>/g)[0]
 	})
 
-	return out
+	await promises.writeFile(opt.chunk, code, {flag: 'w'})
 }
 
 
 /**
  * Create a bundle file
- * @param {string} outbundle
- * @param {object} conf
+ * 
+ * @param {object} opt option
  */
-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)]
+async function bundle(opt) {
+	if(!exists(opt.chunk)) {
+		return
+	}
+	
+	const {metafile} = await es.build({
+		...opt.settings,
+		metafile: true,
+		minify: opt.minify,
+		outfile: opt.bundle,
+		entryPoints: [opt.chunk],
+		entryNames: '[name]-[hash]'
 	})
 
-	if(file.exists(out)) fs.unlinkSync(out)
+	const file = Object.keys(metafile.outputs)[0]
+	const data = {
+		file,
+		hash: file.match(/-(.*).js/)[1],
+		bundle: file.match(/.*(\/.*)$/)[1]
+	}
+
+	/**
+	 * Delete old bundle
+	 */
+	const manifest = resolve.main(opt.output, 'manifest.json')
+	if(exists(manifest)) {
+		const files = readdir(resolve.main(opt.output))
+
+		files.forEach((file) => {
+			const matched = file.name.match(/^bundle-([A-Z0-9+]{8})\.js$/)
+			if(matched) {
+				if(data.hash == matched[1]) {
+					return
+				}
+				unlink(path.resolve(file.parentPath, file.name))
+			}
+		})
+	}
+
+	await promises.writeFile(manifest, JSON.stringify(data), {flag: 'w'})
+	unlink(opt.chunk)
 }
 
 
 /**
  * 
- * @param {object} conf 
+ * @param {object} config 
  */
-module.exports = async function build(conf) {
+module.exports = async function(opt) {
+	/**
+	 * Create build directory
+	 */
+	await makedir(resolve.main(opt.output))
+
+	opt.entry = resolve.main(opt.entry)
+	opt.chunk = resolve.main(opt.output, 'chunk.jsx')
+	opt.bundle = resolve.main(opt.output, 'bundle.js')
+	opt.template = resolve.dirname(__filename, 'template.js')
+	opt.components = resolve.dirname(opt.entry, 'components')
+
 	try {
-		await bundle('bundle.js', conf)
+		await build(opt)
+		await bundle(opt)
 	}
 	catch(e) {
 		console.log(e)

package/bin/config.js

@@ -1,26 +1,5 @@
-const {file} = require('@vindo/utility')
-
-
-const port = 2001
-const args = {}
-const argv = process.argv
-
-
-const vindo = file.read(file.join(process.cwd(), 'vindo.json'))
-
-
-for(var i in argv) {
-	const pat = /^([a-z-]+)=/
-
-	if(i < 2) {
-		continue
-	}
-	var arg = argv[i].split(pat, 3).filter(String)
-
-	if(arg) {
-		args[arg[0].substring(2)] = arg[1] ? arg[1] : true
-	}
-}
+const util = require('./util')
+const config = util.use('@vindo/core/lib/config')
 
 
 module.exports = {
@@ -28,31 +7,64 @@ module.exports = {
 	 * Development script
 	 */
 	get devScript() {
-		return `http://127.0.0.1:${this.option.port}/browser.js`
+		return `http://127.0.0.1:${this.option.port}/development`
+	},
+
+	/**
+	 * Vindo config
+	 */
+	get vindo() {
+
+		return config.config({
+			buildOption: {
+				port: 2001,
+				minify: true,
+				watch: [
+					'./src'
+				],
+				output: './public'
+			}
+		})
 	},
 
 	/**
 	 * Build Options
 	 */
 	get option() {
-		const {buildOption} = JSON.parse(vindo)
-		
-		return Object.assign({port}, buildOption, {
+		const opt = this.vindo.buildOption
+		const args = this.argv()
+
+		return Object.assign(opt, {
 			...args,
-			output: typeof args.output == 'string' ? args.output : buildOption.output,
+			settings: {
+				bundle: true,
+				format: 'esm',
+				logLevel: 'error',
+				allowOverwrite: true,
+			},
+			output: typeof args.output == 'string' ? args.output : opt.output,
 		})
 	},
 
 	/**
-	 * Console log color pattern
+	 * Get args
 	 */
-	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'},
+	argv() {
+		const args = {}
+		const argv = process.argv
+
+		for(var i in argv) {
+			const pat = /^([a-z-]+)=/
+
+			if(i < 2) {
+				continue
+			}
+			var arg = argv[i].split(pat, 3).filter(String)
+
+			if(arg) {
+				args[arg[0].substring(2)] = arg[1] ? arg[1] : true
+			}
+		}
+		return args
 	}
 }

package/bin/development.js

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

package/bin/index.js

@@ -1,78 +1,38 @@
 #! /usr/bin/env node
 
 
-
-const {file} = require('@vindo/utility')
-const {exec, spawn} = require('node:child_process')
-const {watch:watcher} = require('chokidar')
-const {styleText:color} = require('node:util')
-
-
-var evt = {}
-var cwd = process.cwd()
-var child = null
-
-
+const util = require('./util')
 const build = require('./build')
 const server = require('./server')
-const {option, pattern, devScript} = require('./config')
+const config = require('./config')
 
-
-/**
- * Set to global environment
- */
-process.env.DEV_SERVER = devScript
-process.env.DEV_SERVER_PORT = option.port
+const {watch} = require('chokidar')
+const kill = require('tree-kill')
+const {exec, spawn} = require('node:child_process')
 
 
-/**
- * Add event
- */
-function on(name, cb) {
-  evt[name] = cb
-}
+const {log, read, events, colors, resolve} = util
 
-/**
- * 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)
-}
+var child = null
+var option = config.option
 
 /**
- * 
+ * Set to global environment
  */
-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_SERVER = config.devScript
+process.env.DEV_SERVER_PORT = config.option.port
 
 
 /**
  * 
  */
-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, {
+    watch(dirs, {
       // ignored: (path, stats) => stats?.isFile() && !path.endsWith('.js'), // only watch js files
       persistent: true
     })
@@ -90,8 +50,8 @@ async function watch(dirs, cb) {
 function execute() {
   var i = 0
   var sp = exec(option.execute, {
-    cwd,
-    env: process.env
+    env: process.env,
+    cwd: process.cwd(),
   })
   log('green', `[vindo] Running ${option.execute}`)
 
@@ -105,9 +65,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 +78,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'))
   })
@@ -138,16 +98,10 @@ function restart(event) {
   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()
 }
@@ -156,19 +110,19 @@ function restart(event) {
 /**
  * Create server
  */
-const http = server((req, res) => {
+const http = server(async (req, res) => {
   if(req.isStream()) {
-    on('change', () => {
+    events.on('change', () => {
       res.write(`data: {changed: true}\n\n`)
     })
   }
 
-  if(req.is('reload')) {
+  if(req.is('development')) {
     res.headers({
       'Content-Type':
       'application/javascript'
     })
-    res.end(file.read(__dirname.concat('/reload.js')))
+    res.end(await read(resolve.curr('development.js')))
   }
 })
 
@@ -177,15 +131,13 @@ const http = server((req, res) => {
 http.listen(option.port, function() {
   child = execute()
 
-  if(option.output) {
-    build(option)
-  }
+  build(option)
 
   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)
   }
 })

package/bin/template.js

@@ -0,0 +1,29 @@
+
+import React from 'react'
+import client from '@vindo/react/client'
+
+const chunk = {}
+
+{CHUNK_IMPORTS}
+{ENTRY_IMPORTS}
+
+
+if(chunk.head || chunk.body) {
+  throw new SyntaxError(`Component name '${chunk.head ? 'head' : 'body'}' is a reserved name for SSR client components.`)
+}
+
+chunk.head = function head(meta) {
+  const {props:{children}} = React.cloneElement((
+    {HEAD_COMPONENT}
+  ))
+  return children
+}
+
+chunk.body = function body(props) {
+  const {props:{children}, type} = React.cloneElement((
+    {BODY_COMPONENT}
+  ))
+  return type({children, ...props})
+}
+
+client.render(document, chunk)

package/bin/util.js

@@ -0,0 +1,131 @@
+const {styleText:color} = require('util')
+const {file, events, string} = require('@vindo/utility')
+
+
+
+module.exports = exports = Object.create(file, {
+  string: {value: string},
+  events: {value: events},
+})
+
+/**
+ * Set colors
+ */
+const colors = {
+  set(name, text) {
+    return color(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, color(item.color, item.text))
+    }
+    return text.trim()
+  }
+}
+
+function replace(string, data = {}) {
+  if(Object.keys(data).length == 0) {
+    return string
+  }
+
+  function repl(v) {
+    var value = data[v.match(/([a-z_]+)/g)]
+    if(value) {
+      return value
+    }
+    return ''
+  }
+
+  if(string) {
+    var patt = string.match(/(\{[a-z_]+\})/g)
+    if(patt) {
+      return string.replace(new RegExp(patt.join('|'), 'g'), repl)
+    }
+  }
+  return string
+}
+
+/**
+ * Resolve path
+ */
+const resolve = {
+  main(...args) {
+    return file.path.resolve(process.cwd(), ...args)
+  },
+  curr(...args) {
+    return file.path.resolve(__dirname, ...args)
+  },
+  dirname(path, ...args) {
+    return resolve.main(file.path.dirname(path), ...args)
+  },
+}
+
+/**
+ * Log with colors
+ */
+function log(name, text) {
+  if(name) {
+    return console.log(color(name, text.toString().trim()))
+  }
+  return console.log(text)
+}
+
+/**
+ * Use module
+ */
+function use(name) {
+  return require(resolve.main('node_modules', name))
+}
+
+/**
+ * 
+ * File system utilities
+ * 
+ */
+async function copy(dest) {
+  const src = resolve.curr(
+    path.basename(dest)
+  )
+  return await file.promises.cp(src, dest)
+}
+/**
+ * 
+ */
+async function makedir(path) {
+	try {
+    await file.promises.mkdir(path)
+	}
+	catch(e) {}
+}
+/**
+ * 
+ */
+async function unlink(path) {
+	try {
+    await file.promises.unlink(path)
+	}
+	catch(e) {}
+}
+
+
+exports.log = log
+exports.use = use
+exports.copy = copy
+exports.unlink = unlink
+exports.makedir = makedir
+exports.colors = colors
+exports.resolve = resolve

package/package.json

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

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))