nullstack · Mortaro · Apr 25, 2022 · Apr 24, 2022 · Apr 24, 2022 · Apr 24, 2022
diff --git a/builders/spa.js b/builders/spa.js
@@ -1,9 +1,9 @@
-module.exports = async function spa({ output, cache }) {
+module.exports = async function spa({ output, cache, environment }) {
   const folder = output || 'spa';
   process.env.NULLSTACK_ENVIRONMENT_MODE = 'spa';
 
   const dir = process.cwd();
-  const application = require(`${dir}/.production/server`).default
+  const application = require(`${dir}/.${environment}/server`).default
   const { existsSync, mkdirSync, writeFileSync, copySync, removeSync } = require('fs-extra');
   const path = `${dir}/${folder}`;
 
@@ -26,8 +26,8 @@ module.exports = async function spa({ output, cache }) {
   console.log(` ⚙️  /public/`)
   copySync(`${dir}/public`, path);
   await copy('/', '/index.html')
-  console.log(` ⚙️  /.production/`)
-  copySync(`${dir}/.production`, path, { filter })
+  console.log(` ⚙️  /.${environment}/`)
+  copySync(`${dir}/.${environment}`, path, { filter })
   await copy(`/manifest.webmanifest`)
   await copy(`/service-worker.js`)
   await copy('/robots.txt')
@@ -37,7 +37,7 @@ module.exports = async function spa({ output, cache }) {
 
   if (cache) {
     console.log('Storing cache...');
-  } else {
+  } else if (environment === 'production') {
     process.exit();
   }
 }
diff --git a/builders/ssg.js b/builders/ssg.js
@@ -1,9 +1,9 @@
-module.exports = async function ssg({ output, cache }) {
+module.exports = async function ssg({ output, cache, environment }) {
   const folder = output || 'ssg';
   process.env.NULLSTACK_ENVIRONMENT_MODE = 'ssg';
 
   const dir = process.cwd();
-  const application = require(`${dir}/.production/server`).default;
+  const application = require(`${dir}/.${environment}/server`).default;
   const { resolve } = require('path')
   const { existsSync, mkdirSync, writeFileSync, copySync, removeSync } = require('fs-extra');
 
@@ -90,8 +90,8 @@ module.exports = async function ssg({ output, cache }) {
   mkdirSync(path())
   console.log(` ⚙️  /public/`)
   copySync(path(`../public`), path());
-  console.log(` ⚙️  /.production/`)
-  copySync(path(`../.production`), path(), { filter });
+  console.log(` ⚙️  /.${environment}/`)
+  copySync(path(`../.${environment}`), path(), { filter });
   await copyRoute()
   await copyRoute(`/nullstack/${application.environment.key}/offline`);
   await copyRoute(`/404`);
@@ -105,7 +105,7 @@ module.exports = async function ssg({ output, cache }) {
 
   if (cache) {
     console.log('Storing cache...');
-  } else {
+  } else if (environment === 'production') {
     process.exit();
   }
 }
diff --git a/client/liveReload.js b/client/liveReload.js
@@ -1,3 +1,5 @@
+import worker from './worker'
+
 let shouldReloadNext = false;
 let timer = null;
 
@@ -13,7 +15,8 @@ function reload() {
 }
 
 function liveReload() {
-  const socket = new WebSocket(`${location.protocol.replace('http', 'ws')}//${location.host}`);
+  const url = worker.api ? `${worker.api.replace('http', 'ws')}` : `${location.protocol.replace('http', 'ws')}//${location.host}`
+  const socket = new WebSocket(url);
   socket.addEventListener('open', reload);
   socket.addEventListener('close', liveReload);
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nullstack",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "Full-stack Javascript Components for one-dev armies",
   "main": "nullstack.js",
   "author": "Mortaro",

diff --git a/scripts/index.js b/scripts/index.js
@@ -50,7 +50,7 @@ function logTrace(stats, showCompiling) {
   lastTrace = '';
 }
 
-function start({ input, port, env }) {
+function start({ input, port, env, output, mode = 'ssr' }) {
   const environment = 'development';
   const compiler = getCompiler({ environment, input });
   if (port) {
@@ -61,7 +61,12 @@ function start({ input, port, env }) {
   }
   console.log(` 🚀️ Starting your application in ${environment} mode...`);
   console.log();
-  compiler.watch({}, (error, stats) => logTrace(stats, true));
+  compiler.watch({}, (error, stats) => {
+    logTrace(stats, true)
+    if (!stats.hasErrors() && mode !== 'ssr') {
+      require(`../builders/${mode}`)({ output, environment });
+    };
+  });
 }
 
 function build({ input, output, cache, env, mode = 'ssr' }) {
@@ -74,16 +79,18 @@ function build({ input, output, cache, env, mode = 'ssr' }) {
   compiler.run((error, stats) => {
     logTrace(stats, false);
     if (stats.hasErrors()) process.exit(1);
-    require(`../builders/${mode}`)({ output, cache });
+    require(`../builders/${mode}`)({ output, cache, environment });
   });
 }
 
 program
   .command('start')
   .alias('s')
   .description('Start application in development environment')
+  .addOption(new program.Option('-m, --mode <mode>', 'Build production bundles').choices(buildModes))
   .option('-p, --port <port>', 'Port number to run the server')
   .option('-i, --input <input>', 'Path to project that will be started')
+  .option('-o, --output <output>', 'Path to build output folder')
   .option('-e, --env <name>', 'Name of the environment file that should be loaded')
   .helpOption('-h, --help', 'Learn more about this command')
   .action(start)

diff --git a/tests/src/Application.njs b/tests/src/Application.njs
@@ -45,6 +45,8 @@ import Vunerability from './Vunerability';
 import WindowDependency from './WindowDependency';
 import WorkerVerbs from './WorkerVerbs';
 import MetatagState from './MetatagState';
+import TypeScriptExtension from './TypeScriptExtension';
+import JavaScriptExtension from './JavaScriptExtension';
 
 class Application extends Nullstack {
 
@@ -111,6 +113,8 @@ class Application extends Nullstack {
         <ComponentTernary route="/component-ternary" />
         <AnchorModifiers route="/anchor-modifiers" />
         <MetatagState route="/metatag-state" />
+        <JavaScriptExtension route="/javascript-extension" />
+        <TypeScriptExtension route="/typescript-extension" generic />
         <ErrorPage route="*" />
       </main>
     )

diff --git a/tests/src/JavaScriptExtension.jsx b/tests/src/JavaScriptExtension.jsx
@@ -0,0 +1,15 @@
+import Nullstack from 'nullstack';
+
+class JavaScriptExtension extends Nullstack {
+
+  render({ environment }) {
+    return (
+      <div data-imported >
+        {environment.key}
+      </div>
+    )
+  }
+
+}
+
+export default JavaScriptExtension;
diff --git a/tests/src/JavaScriptExtension.test.js b/tests/src/JavaScriptExtension.test.js
@@ -0,0 +1,13 @@
+beforeAll(async () => {
+  await page.goto('http://localhost:6969/javascript-extension');
+});
+
+describe('JavaScriptExtension', () => {
+
+  test('components can use the jsx extension', async () => {
+    await page.waitForSelector('[data-imported]');
+    const element = await page.$('[data-imported]');
+    expect(element).toBeTruthy();
+  });
+
+});
diff --git a/tests/src/TypeScriptExtension.tsx b/tests/src/TypeScriptExtension.tsx
@@ -0,0 +1,21 @@
+import Nullstack from 'nullstack';
+import { NullstackClientContext } from 'nullstack/types';
+
+interface TypeScriptExtensionProps {
+  generic: boolean
+  route?: string
+}
+
+class TypeScriptExtension extends Nullstack<TypeScriptExtensionProps> {
+
+  render({ generic, environment }: NullstackClientContext & TypeScriptExtensionProps) {
+    return (
+      <div data-imported data-generic={generic}>
+        {environment.key}
+      </div>
+    )
+  }
+
+}
+
+export default TypeScriptExtension;
diff --git a/tests/src/TypesScriptExtension.test.js b/tests/src/TypesScriptExtension.test.js
@@ -0,0 +1,19 @@
+beforeAll(async () => {
+  await page.goto('http://localhost:6969/typescript-extension');
+});
+
+describe('TypeScriptExtension', () => {
+
+  test('components can use the tsx extension', async () => {
+    await page.waitForSelector('[data-generic]');
+    const element = await page.$('[data-generic]');
+    expect(element).toBeTruthy();
+  });
+
+  test('class components accept generics', async () => {
+    await page.waitForSelector('[data-generic]');
+    const element = await page.$('[data-generic]');
+    expect(element).toBeTruthy();
+  });
+
+});
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -16,7 +16,8 @@ export * from './ServerContext'
 export * from './Settings'
 export * from './Worker'
 
-export default class Nullstack {
+export default class Nullstack<Type = any> {
+  constructor(props?: Type)
   static start?(App: any): NullstackClientContext | NullstackServerContext
   static use?(Plugin: NullstackPlugin)
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -22,7 +22,7 @@ function cacheFactory(args, folder, name) {
 const babel = {
   test: /\.js$/,
   resolve: {
-    extensions: ['.njs', '.js', '.nts', '.ts']
+    extensions: ['.njs', '.js', '.nts', '.ts', '.tsx', '.jsx']
   },
   use: {
     loader: require.resolve('babel-loader'),
@@ -39,9 +39,9 @@ const babel = {
 };
 
 const nullstackJavascript = {
-  test: /\.(njs|nts)$/,
+  test: /\.(njs|nts|jsx|tsx)$/,
   resolve: {
-    extensions: ['.njs', '.js', '.nts', '.ts']
+    extensions: ['.njs', '.js', '.nts', '.ts', '.tsx', '.jsx']
   },
   use: {
     loader: require.resolve('babel-loader'),
@@ -64,9 +64,9 @@ const nullstackJavascript = {
 };
 
 const nullstackTypescript = {
-  test: /\.nts$/,
+  test: /\.(nts|tsx)$/,
   resolve: {
-    extensions: ['.njs', '.js', '.nts', '.ts']
+    extensions: ['.njs', '.js', '.nts', '.ts', '.tsx', '.jsx']
   },
   use: {
     loader: require.resolve('babel-loader'),
@@ -163,11 +163,11 @@ function server(env, argv) {
         babel,
         nullstackJavascript,
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/inject-nullstack.js'),
         },
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/register-static-from-server.js'),
         },
         {
@@ -178,11 +178,11 @@ function server(env, argv) {
         },
         nullstackTypescript,
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/add-source-to-node.js'),
         },
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/register-inner-components.js'),
         },
       ]
@@ -251,15 +251,15 @@ function client(env, argv) {
         babel,
         nullstackJavascript,
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/remove-import-from-client.js'),
         },
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/inject-nullstack.js'),
         },
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/remove-static-from-client.js'),
         },
         {
@@ -273,11 +273,11 @@ function client(env, argv) {
         liveReload,
         nullstackTypescript,
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/add-source-to-node.js'),
         },
         {
-          test: /.(njs|nts)$/,
+          test: /\.(njs|nts|jsx|tsx)$/,
           loader: path.resolve('./node_modules/nullstack/loaders/register-inner-components.js'),
         },
       ]