@vindo/cli 0.0.1

package/README.md

@@ -0,0 +1,12 @@
+## Vindo CLI
+Command line for running vindo server and react SSR for development.
+
+
+## Installation
+```
+npm install @vindo/cli
+```
+Or
+```
+yarn add @vindo/cli
+```

package/bin/build.js

@@ -0,0 +1,139 @@
+
+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

@@ -0,0 +1,83 @@
+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/config.js

@@ -0,0 +1,58 @@
+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
+	}
+}
+
+
+module.exports = {
+	/**
+	 * Development script
+	 */
+	get devScript() {
+		return `http://127.0.0.1:${this.option.port}/browser.js`
+	},
+
+	/**
+	 * Build Options
+	 */
+	get option() {
+		const {buildOption} = JSON.parse(vindo)
+		
+		return Object.assign({port}, buildOption, {
+			...args,
+			output: typeof args.output == 'string' ? args.output : buildOption.output,
+		})
+	},
+
+	/**
+	 * Console log color pattern
+	 */
+	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'},
+	}
+}

package/bin/index.js

@@ -0,0 +1,191 @@
+#! /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 build = require('./build')
+const server = require('./server')
+const {option, pattern, devScript} = require('./config')
+
+
+/**
+ * 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()
+}
+
+
+/**
+ * 
+ */
+async function watch(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
+      persistent: true
+    })
+    .on('change', (path) => cb({path}))
+  }
+  catch(e) {
+    throw e
+  }
+}
+
+
+/**
+ * 
+ */
+function execute() {
+  var i = 0
+  var sp = exec(option.execute, {
+    cwd,
+    env: process.env
+  })
+  log('green', `[vindo] Running ${option.execute}`)
+
+  /**
+   * Emit change event to reload client
+   */
+  sp.stdio[1].on('data', (data) => {
+    i += 1
+    /**
+     * Emit only on first log from server,
+     * It means the server runs successfully.
+     */
+    if(i == 1) {
+      emit('change')
+    }
+    console.log(setColors(data))
+  })
+  
+  /**
+   * Error data
+   */
+  sp.stdio[2].on('data', (data) => {
+    var text = data.toString().split(/\n/)
+
+    for(var i in text) {
+      if(i == 0) {
+        text[0] = color('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'))
+    }
+    log(null, text.join('\r\n'))
+  })
+  return sp
+}
+
+
+/**
+ * Restart server and rebuild
+ */
+function restart(event) {
+  log('gray', `[vindo] File changed '${event.path}'`)
+  log('green', `[vindo] Rebuilding...`)
+  log('green', `[vindo] Restarting server...`)
+
+  if(option.output) {
+    build(option)
+  }
+  if(child) {
+    if(process.platform === 'win32') {
+      spawn('taskkill', ['/pid', child.pid, '/f', '/t'])
+    }
+    else {
+      child.kill('SIGINT')
+    }
+  }
+  child = execute()
+}
+
+
+/**
+ * Create server
+ */
+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')))
+  }
+})
+
+
+
+http.listen(option.port, function() {
+  child = execute()
+
+  if(option.output) {
+    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)
+  }
+})

package/bin/reload.js

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

package/bin/server.js

@@ -0,0 +1,43 @@
+const {parse} = require('node:path')
+const {createServer} = require('node:http')
+
+
+module.exports = function(cb) {
+
+  return createServer((req, res) => {
+    const url = parse(req.url)
+
+    /**
+     * Check endpoint
+     */
+    req.is = function(name = null) {
+      return url.name == name || url.base == name
+    }
+
+    /**
+     * Set multiple headers 
+     */
+    res.headers = function(headers) {
+      res.setHeaders(new Headers(headers))
+    }
+
+    /**
+     * Accept event stream
+     */
+    req.isStream = function() {
+      if(req.is('')) {
+        res.headers({
+          'Connection': 'keep-alive',
+          'Cache-Control': 'no-cache',
+          'Content-Type': 'text/event-stream',
+        })
+
+        return true
+      }
+    }
+    res.headers({'Access-Control-Allow-Origin': '*'})
+
+    
+    cb(req, res)
+  })
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@vindo/cli",
+  "version": "0.0.1",
+  "description": "Command line for running vindo server and react SSR for development.",
+  "main": "bin/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\""
+  },
+  "keywords": [
+    "cli"
+  ],
+  "bin": {
+    "vindo": "./bin/index.js"
+  },
+  "author": "Ruel Mindo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rmindo/vindo.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/rmindo/vindo/tree/main/packages/cli",
+  "dependencies": {
+    "@vindo/utility": "^0.0.6",
+    "chokidar": "^4.0.3",
+    "esbuild": "^0.25.4"
+  }
+}