@cilix/lightjs 0.0.6 → 0.0.8

package/README.md

@@ -72,156 +72,6 @@ Create a project boilerplate using Light.js's built-in backend router. Usage bel
 npx lightjs create my-app
 ```
 
-## Usage
-
-### `lightjs.compile()`
-
-Fundamentally, Light.js is a library that takes in a Light.js source tree and outputs a single HTML file or string.
-
-```javascript
-const lightjs = require('lightjs');
-
-lightjs.compile({
-  input: 'src/index.lightjs',
-  output: 'public/index.html'
-});
-```
-
-No other step is required for a fully reactive, bundled, minified application.
-
-This function may also be used to serve dynamic content in real time.
-
-```javascript
-const express = require('express');
-const lightjs = require('lightjs');
-
-const app = express();
-
-app.get('/', async (req, res) => {
-  const html = await lightjs.compile({
-    input: 'src/index.lightjs'
-  });
-  res.end(html);
-});
-
-app.listen(3838);
-```
-
-In order for the above example to have production quality speed, you must enable caching. And if desired, Javascript minification can be enabled as well:
-
-```javascript
-const html = await lightjs.compile({
-  input: 'src/index.lightjs',
-  cache: true,
-  minify: true
-});
-```
-
-The last thing to know about Light.js's compile function is document data.
-
-```javascript
-const html = await lightjs.compile({
-  input: 'src/about.lightjs',
-  data: {
-    pageTitle: 'About me'
-  }
-});
-```
-
-In your Light.js document pageTitle can be found on the global 'data' object:
-
-```javascript
-// index.lightjs
-html [
-  head []
-  body [
-    h1 '{{data.pageTitle}}'
-  ]
-]
-```
-
-### `lightjs.app()`
-
-As mentioned above, Light.js ships with a built-in backend router. This router is exposed through the 'app' function, which returns a Node.js HTTP request handler.
-
-```javascript
-const http = require('http');
-const light = require('lightjs');
-
-const PORT = 4477;
-
-const app = light.app({
-  publicDir: './public',
-  cache: true,
-  minify: true,
-  routes: {
-    // map a route directly to a light file
-    '/': 'src/index.light',
-
-    // or for more complex arrangements, you can map the route to the same arguments you would pass to light.compile()
-    '/blog/:id': {
-      input: 'src/blog.light',
-      data: async (req) => {
-        const post = 'hi' // get blog post with req.params.id
-        return post
-      }
-    }
-  }
-})
-
-http.createServer(app).listen(PORT);
-```
-
-Light.js's router is also completely compatible with Express:
-
-```javascript
-const http = require('http');
-const light = require('lightjs');
-const express = require('express');
-
-const PORT = 4477;
-
-const app = express();
-
-const lightRouter = light.app({
-  cache: true,
-  minify: true,
-  routes: {
-    // ...
-  }
-})
-
-app.use(express.static('public'));
-app.use(lightRouter);
-
-http.createServer(app).listen(PORT);
-```
-
-Or, as previously mentioned, you can simply use `light.compile` with Express:
-
-```javascript
-const http = require('http');
-const light = require('lightjs');
-const express = require('express');
-
-const PORT = 4477;
-
-const app = express();
-
-app.get('/', async (req, res) => {
-  const html = await light.compile({
-    input: 'src/index.light',
-    // for production
-    minify: true,
-    cache: true
-  });
-
-  res.end(html);
-});
-
-http.createServer(app).listen(PORT);
-```
-
 ## Syntax
 
 Light.js syntax is extremely terse but it is **not** whitespace sensitive. It's a much less shift-y version of HTML. You simply drop the angle brackets, and put children between square brackets. Tags without children as well as void tags are ended with an empty set of square brackets.
@@ -994,6 +844,156 @@ html [
 ]
 ```
 
+## Usage
+
+### `lightjs.compile()`
+
+Fundamentally, Light.js is a library that takes in a Light.js source tree and outputs a single HTML file or string.
+
+```javascript
+const lightjs = require('lightjs');
+
+lightjs.compile({
+  input: 'src/index.lightjs',
+  output: 'public/index.html'
+});
+```
+
+No other step is required for a fully reactive, bundled, minified application.
+
+This function may also be used to serve dynamic content in real time.
+
+```javascript
+const express = require('express');
+const lightjs = require('lightjs');
+
+const app = express();
+
+app.get('/', async (req, res) => {
+  const html = await lightjs.compile({
+    input: 'src/index.lightjs'
+  });
+  res.end(html);
+});
+
+app.listen(3838);
+```
+
+In order for the above example to have production quality speed, you must enable caching. And if desired, Javascript minification can be enabled as well:
+
+```javascript
+const html = await lightjs.compile({
+  input: 'src/index.lightjs',
+  cache: true,
+  minify: true
+});
+```
+
+The last thing to know about Light.js's compile function is document data.
+
+```javascript
+const html = await lightjs.compile({
+  input: 'src/about.lightjs',
+  data: {
+    pageTitle: 'About me'
+  }
+});
+```
+
+In your Light.js document pageTitle can be found on the global 'data' object:
+
+```javascript
+// index.lightjs
+html [
+  head []
+  body [
+    h1 '{{data.pageTitle}}'
+  ]
+]
+```
+
+### `lightjs.app()`
+
+As mentioned above, Light.js ships with a built-in backend router. This router is exposed through the 'app' function, which returns a Node.js HTTP request handler.
+
+```javascript
+const http = require('http');
+const light = require('lightjs');
+
+const PORT = 4477;
+
+const app = light.router({
+  publicDir: './public',
+  cache: true,
+  minify: true,
+  routes: {
+    // map a route directly to a light file
+    '/': 'src/index.light',
+
+    // or for more complex arrangements, you can map the route to the same arguments you would pass to light.compile()
+    '/blog/:id': {
+      input: 'src/blog.light',
+      data: async (req) => {
+        const post = 'hi' // get blog post with req.params.id
+        return post
+      }
+    }
+  }
+})
+
+http.createServer(app).listen(PORT);
+```
+
+Light.js's router is also completely compatible with Express:
+
+```javascript
+const http = require('http');
+const light = require('lightjs');
+const express = require('express');
+
+const PORT = 4477;
+
+const app = express();
+
+const lightRouter = light.router({
+  cache: true,
+  minify: true,
+  routes: {
+    // ...
+  }
+})
+
+app.use(express.static('public'));
+app.use(lightRouter);
+
+http.createServer(app).listen(PORT);
+```
+
+Or, as previously mentioned, you can simply use `light.compile` with Express:
+
+```javascript
+const http = require('http');
+const light = require('lightjs');
+const express = require('express');
+
+const PORT = 4477;
+
+const app = express();
+
+app.get('/', async (req, res) => {
+  const html = await light.compile({
+    input: 'src/index.light',
+    // for production
+    minify: true,
+    cache: true
+  });
+
+  res.end(html);
+});
+
+http.createServer(app).listen(PORT);
+```
+
 
 This is the entire feature set of Lightjs. If there is even one aspect of Lightjs that is missing from this document, it is considered a bug.
 

package/cli.js

@@ -137,6 +137,15 @@ for (let i = 0; i < process.argv.length; i++) {
         }
       }
       break;
+    case '-i':
+      config.input = process.argv[++i];
+      break;
+    case '-o':
+      config.output = process.argv[++i];
+      break;
+    case '--minify':
+      config.minify = true;
+      break;
     default:
       break
   }
@@ -158,6 +167,16 @@ if (config.dev) {
   fs.writeFileSync(path.join(p, 'todo.light'), todoFile);
   fs.writeFileSync(path.join(p, 'server.js'), quickServer);
   fs.writeFileSync(path.join(p, 'package.json'), packageFile(config.create, pf.version));
+} else if (config.input) {
+  if (config.output) {
+    light.compile({
+      input: config.input,
+      output: config.output,
+      minify: config.minify || false
+    });
+  } else {
+    light.compile(config.input).then((output) => console.log(output));
+  }
 } else {
   console.log(help);
 }

package/core.js

@@ -21,7 +21,7 @@
 
 module.exports = (config, fs, path) => {
   const _files = {};
-  let includeRuntime = false;
+  let includeRuntime;
 
   function throw_error (err) {
     err.origin = 'light';
@@ -1564,8 +1564,8 @@ module.exports = (config, fs, path) => {
             } else {
               node.children.forEach(walk);
               if (node.data.name === 'head') {
-                if (includeRuntime) {
-                  emit('<script>');
+                if (js) {
+                  emit('<script type="module">');
                   emit(`document.addEventListener('DOMContentLoaded', function () {\n`);
                   emit(`(function (data){${js}})(${JSON.stringify(initial_state)})`);
                   emit('});');
@@ -2758,10 +2758,11 @@ module.exports = (config, fs, path) => {
   };
 
   const renderToAst = async (file, actions, _fileText) => {
+    includeRuntime = false;
     const fileText = file === 'default' ? _fileText : openFile(file);
     const tokens = tokenize(fileText, file);
     const ast = parse(tokens);
-    let js = '';
+    let js;
     if (includeRuntime) {
       const runtime = generateRuntime(ast, actions);
 

package/index.js

@@ -53,6 +53,14 @@ const addParentPaths = (code, p) => {
   return out;
 };
 
+const hideDynamicImports = (code) => {
+  return code.split('import(').join('__IMPORT_PLACEHOLDER__(');
+};
+
+const restoreDynamicImports = (code) => {
+  return code.split('__IMPORT_PLACEHOLDER__(').join('import(');
+};
+
 const esbuild_to_light_error = (e, chunk) => {
   let row = e.location.line - 1;
   let col = e.location.column;
@@ -88,7 +96,8 @@ Light.compile = async (name, opts) => {
     jsTransform: async (chunk) => {
       try {
         const opts = { format: 'cjs', loader: 'ts' };
-        const result = await esbuild.transform(chunk.code, opts);
+        const codeChunk = hideDynamicImports(chunk.code);
+        const result = await esbuild.transform(codeChunk, opts);
         return addParentPaths(result.code, chunk.parent_dir);
       } catch (e) {
         e.origin = 'esbuild';
@@ -106,7 +115,8 @@ Light.compile = async (name, opts) => {
         minify: opts.minify,
         write: false
       });
-      return result.outputFiles[0].text;
+      const output = restoreDynamicImports(result.outputFiles[0].text);
+      return output;
     }
   }, fs, path);
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cilix/lightjs",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "A new kind of JavaScript framework",
   "main": "index.js",
   "scripts": {