nullstack · Mortaro · Apr 24, 2022 · Apr 24, 2022
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'),
         },
       ]