nullstack · Mortaro · Feb 20, 2022 · Dec 21, 2021 · Dec 28, 2021 · Dec 28, 2021
diff --git a/.github/workflows/pr-tests.yml b/.github/workflows/pr-tests.yml
@@ -0,0 +1,51 @@
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Nullstack Tests
+
+on:
+  pull_request:
+    branches: [ master, next ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    container: lironavon/docker-puppeteer-container:14.16.0
+    env:
+      CI: true
+
+    strategy:
+      matrix:
+        node-version: [12.20.0, 14.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+      # cache the dependencies from any node_modules directory
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: |
+            **/node_modules
+            **/package-lock.json
+          key: node_modules-${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install and link main deps
+        run: |
+          npm install
+          npm link
+
+      - name: Install deps at tests folder
+        working-directory: ./tests
+        run: |
+          npm link nullstack
+          npm install
+
+      - name: Run tests
+        working-directory: ./tests
+        run: npm test
diff --git a/builders/spa.js b/builders/spa.js
@@ -1,9 +1,10 @@
-module.exports = async function spa(folder = 'spa') {
+module.exports = async function spa({ output, cache }) {
+  const folder = output || 'spa';
   process.env.NULLSTACK_ENVIRONMENT_MODE = 'spa';
 
   const dir = process.cwd();
   const application = require(`${dir}/.production/server`).default
-  const { existsSync, mkdirSync, writeFileSync, copySync, rmSync } = require('fs-extra');
+  const { existsSync, mkdirSync, writeFileSync, copySync, removeSync } = require('fs-extra');
   const path = `${dir}/${folder}`;
 
   async function copy(url, file) {
@@ -19,7 +20,7 @@ module.exports = async function spa(folder = 'spa') {
 
   console.log()
   if (existsSync(path)) {
-    rmSync(path, { recursive: true });
+    removeSync(path);
   }
   mkdirSync(path)
   console.log(` ⚙️  /public/`)
@@ -29,8 +30,14 @@ module.exports = async function spa(folder = 'spa') {
   copySync(`${dir}/.production`, path, { filter })
   await copy(`/manifest.json`)
   await copy(`/service-worker.js`)
+  await copy('/robots.txt')
   console.log()
 
   console.log('\x1b[36m%s\x1b[0m', ` ✅️ ${application.project.name} is ready at ${folder}\n`);
-  process.exit()
+
+  if (cache) {
+    console.log('Storing cache...');
+  } else {
+    process.exit();
+  }
 }
diff --git a/builders/ssg.js b/builders/ssg.js
@@ -1,10 +1,11 @@
-module.exports = async function ssg(folder = 'ssg') {
+module.exports = async function ssg({ output, cache }) {
+  const folder = output || 'ssg';
   process.env.NULLSTACK_ENVIRONMENT_MODE = 'ssg';
 
   const dir = process.cwd();
   const application = require(`${dir}/.production/server`).default;
   const { resolve } = require('path')
-  const { existsSync, mkdirSync, writeFileSync, copySync, rmSync } = require('fs-extra');
+  const { existsSync, mkdirSync, writeFileSync, copySync, removeSync } = require('fs-extra');
 
   function path(file = '') {
     const target = file.startsWith('/') ? file.slice(1) : file;
@@ -85,7 +86,7 @@ module.exports = async function ssg(folder = 'ssg') {
 
   console.log()
   if (existsSync(path())) {
-    rmSync(path(), { recursive: true });
+    removeSync(path());
   }
   mkdirSync(path())
   console.log(` ⚙️  /public/`)
@@ -97,9 +98,15 @@ module.exports = async function ssg(folder = 'ssg') {
   await copyRoute(`/404`);
   await copyBundle(`/manifest.json`)
   await copyBundle(`/service-worker.js`)
+  await copyBundle('/robots.txt')
   await createSitemap()
   console.log()
 
   console.log('\x1b[36m%s\x1b[0m', ` ✅️ ${application.project.name} is ready at ${folder}\n`);
-  process.exit()
+
+  if (cache) {
+    console.log('Storing cache...');
+  } else {
+    process.exit();
+  }
 }
diff --git a/builders/ssr.js b/builders/ssr.js
@@ -1,8 +1,12 @@
-module.exports = async function ssr() {
+module.exports = async function ssr({ cache }) {
   const dir = process.cwd();
   const application = require(`${dir}/.production/server`).default;
 
   console.log('\x1b[36m%s\x1b[0m', `\n ✅️ ${application.project.name} is ready for production\n`);
 
-  process.exit()
+  if (cache) {
+    console.log('Storing cache...');
+  } else {
+    process.exit();
+  }
 }
diff --git a/client/anchorableNode.js b/client/anchorableNode.js
@@ -1,11 +1,15 @@
-import router from './router';
+import router from './router'
 
 export function anchorableElement(element) {
-  const links = element.querySelectorAll('a[href^="/"]:not([target])');
-  for(const link of links) {
-    link.onclick = (event) => {
-      event.preventDefault();
-      router.url = link.getAttribute('href');
-    };
+  const links = element.querySelectorAll('a[href^="/"]:not([target])')
+  for (const link of links) {
+    if (link.dataset.nullstack) return
+    link.dataset.nullstack = true
+    link.addEventListener('click', (event) => {
+      if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+        event.preventDefault()
+        router.url = link.getAttribute('href')
+      }
+    })
   }
-}
+}
diff --git a/client/client.js b/client/client.js
@@ -1,9 +1,9 @@
-import router from './router';
-import rerender from './rerender';
-import context, { generateContext } from './context';
-
 import generateTree from '../shared/generateTree';
 import { loadPlugins } from '../shared/plugins';
+import context, { generateContext } from './context';
+import rerender from './rerender';
+import router from './router';
+
 
 const client = {};
 
@@ -53,6 +53,7 @@ client.processLifecycleQueues = async function () {
   for (const instance of initiationQueue) {
     instance.initiate && await instance.initiate();
     instance._self.initiated = true;
+    instance.launch && instance.launch()
   }
   if (initiationQueue.length) {
     client.update();

diff --git a/client/render.js b/client/render.js
@@ -1,62 +1,64 @@
-import {isFalse, isText} from '../shared/nodes';
-import {anchorableElement} from './anchorableNode';
+import { isFalse, isText } from '../shared/nodes';
+import { anchorableElement } from './anchorableNode';
 
 export default function render(node, options) {
 
-  if(isFalse(node) || node.type === 'head') {
+  if (isFalse(node) || node.type === 'head') {
     return document.createComment("");
   }
 
-  if(isText(node)) {
+  if (isText(node)) {
     return document.createTextNode(node);
   }
 
   const svg = (options && options.svg) || node.type === 'svg';
 
   let element;
-  if(svg) {
+  if (svg) {
     element = document.createElementNS("http://www.w3.org/2000/svg", node.type);
   } else {
     element = document.createElement(node.type);
   }
 
-  if(node.instance) {
+  if (node.instance) {
     node.instance._self.element = element;
   }
 
-  for(let name in node.attributes) {
-    if(name === 'html') {
+  for (let name in node.attributes) {
+    if (name === 'html') {
       element.innerHTML = node.attributes[name];
       anchorableElement(element);
-    } else if(name.startsWith('on')) {
-      const eventName = name.replace('on', '');
-      const key = '_event.' + eventName;
-      node[key] = (event) => {
-        if(node.attributes.default !== true) {
-          event.preventDefault();
-        }
-        node.attributes[name]({...node.attributes, event});
-      };
-      element.addEventListener(eventName, node[key]);
+    } else if (name.startsWith('on')) {
+      if (node.attributes[name] !== undefined) {
+        const eventName = name.replace('on', '');
+        const key = '_event.' + eventName;
+        node[key] = (event) => {
+          if (node.attributes.default !== true) {
+            event.preventDefault();
+          }
+          node.attributes[name]({ ...node.attributes, event });
+        };
+        element.addEventListener(eventName, node[key]);
+      }
     } else {
-      const type = typeof(node.attributes[name]);
-      if(type !== 'object' && type !== 'function') {
-        if(name != 'value' && node.attributes[name] === true) {
+      const type = typeof (node.attributes[name]);
+      if (type !== 'object' && type !== 'function') {
+        if (name != 'value' && node.attributes[name] === true) {
           element.setAttribute(name, '');
-        } else if(name == 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
+        } else if (name == 'value' || (node.attributes[name] !== false && node.attributes[name] !== null && node.attributes[name] !== undefined)) {
           element.setAttribute(name, node.attributes[name]);
         }
       }
     }
   }
 
-  if(!node.attributes.html) {
-    for(let i = 0; i < node.children.length; i++) {
-      const child = render(node.children[i], {svg});
+  if (!node.attributes.html) {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = render(node.children[i], { svg });
       element.appendChild(child);
     }
-    
-    if(node.type == 'select') {
+
+    if (node.type == 'select') {
       element.value = node.attributes.value;
     }
   }

diff --git a/client/rerender.js b/client/rerender.js
@@ -60,8 +60,8 @@ export default function rerender(selector, current, next) {
       if (name === 'html') {
         if (next.attributes[name] !== current.attributes[name]) {
           selector.innerHTML = next.attributes[name];
-          anchorableElement(selector);
         }
+        anchorableElement(selector);
       } else if (name === 'checked') {
         if (next.attributes[name] !== selector.value) {
           selector.checked = next.attributes[name];

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nullstack",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Full-stack Javascript Components for one-dev armies",
   "main": "nullstack.js",
   "author": "Mortaro",
@@ -35,17 +35,17 @@
     "fs-extra": "^10.0.0",
     "glob": "^7.1.7",
     "ignore-loader": "^0.1.2",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^2.4.5",
     "node-fetch": "3.0.0",
     "nodemon-webpack-plugin": "^4.3.1",
-    "purgecss-webpack-plugin": "^2.2.0",
+    "purgecss-webpack-plugin": "^4.1.3",
     "raw-loader": "^4.0.2",
     "sass": "^1.32.11",
     "sass-loader": "^8.0.2",
-    "string-replace-loader": "^2.2.0",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
+    "string-replace-loader": "^3.1.0",
+    "terser-webpack-plugin": "^5.3.0",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
     "webpack-livereload-plugin": "^2.3.0",
     "ws": "^7.4.4"
   }

diff --git a/plugins/anchorable.js b/plugins/anchorable.js
@@ -8,18 +8,21 @@ function match(node) {
   )
 }
 
-function transform({node, router}) {
-  if(!match(node)) return;
-  const originalEvent = node.attributes.onclick;
-  node.attributes.onclick = ({event}) => {
-    event.preventDefault();
-    router.url = node.attributes.href;
-    if(originalEvent) {
+function transform({ node, router }) {
+  if (!match(node)) return
+  const originalEvent = node.attributes.onclick
+  node.attributes.default = true
+  node.attributes.onclick = ({ event }) => {
+    if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+      event.preventDefault()
+      router.url = node.attributes.href
+    }
+    if (originalEvent) {
       setTimeout(() => {
-        originalEvent({...node.attributes, event});
-      }, 0);
+        originalEvent({ ...node.attributes, event })
+      }, 0)
     }
-  };
+  }
 }
 
-export default { transform, client: true }
+export default { transform, client: true }