Merge pull request #16 from houdiniproject/ts_in_webpack

Add initial registration page plus make it all work in webpack

javascripts/app/registration_page.ts

@@ -0,0 +1,5 @@
+// License: LGPL-3.0-or-later
+
+// require a root component here. This will be treated as the root of a webpack package
+
+import "../src/components/registration_page/registration_page"

javascripts/src/components/registration_page/registration_page.spec.ts

@@ -0,0 +1,10 @@
+// License: LGPL-3.0-or-later
+import * as React from 'react';
+import 'jest';
+import * as Component from './registration_page'
+
+describe('RegistrationPage', () => {
+    test('your test here', () => {
+        expect(false).toBe(true)
+    })
+})

javascripts/src/components/registration_page/registration_page.tsx

@@ -0,0 +1,14 @@
+// License: LGPL-3.0-or-later
+import * as React from 'react';
+
+export interface RegistrationPageProps
+{
+
+}
+
+export default class RegistrationPage extends React.Component<RegistrationPageProps, {}> {
+  render() {
+     return <div></div>;
+  }
+}
+

webpack.common.js

@@ -11,6 +11,8 @@ const config_button=require('./config/settings.json');
 const sourcePath = path.join(__dirname, 'client');
 const buildPath = path.join(__dirname, 'public/client');
 const translationPath = path.join(__dirname, 'public/javascripts/_final.js')
+const reactEntrySourcePath = path.join(__dirname, 'javascripts')
+const reactEntryOutputPath = path.join(__dirname, 'public')
 
 var common_rules= [
 
@@ -33,6 +35,7 @@ var common_rules= [
                 },
                 "babel-loader"]
         },
+        { test: /\.tsx?$/, loader:"ts-loader"},
         { test: /\.js$/, exclude: /node_modules|froala/, loader: "babel-loader" },
         { test: /\.es6$/, exclude: /node_modules/, loader: "babel-loader" }
 ]
@@ -47,14 +50,8 @@ module.exports = {
             filename: '[name].js'
         },
         plugins: [
-                 new CleanWebpackPlugin([path.resolve(buildPath, 'js')]),
-                new ProvidePlugin({
-                    // $: ['jquery'],
-                    // '$.cookie':  'jquery.cookie',
-                    // jQuery: ['jquery', 'jquery.cookie'],
-                    // 'jQuery.cookie': 'jquery.cookie'
-                })
-        ]
+                 new CleanWebpackPlugin([path.resolve(buildPath, 'js')])
+            ]
     }
     ,
     // translations: {
@@ -119,7 +116,21 @@ module.exports = {
             new ExtractTextPlugin('page.css'),
             new CleanWebpackPlugin([path.resolve(buildPath, 'css')])
         ]
+    },
+    react: {
+        module:{
+            rules: common_rules
+        },
+        entry: WebpackSweetEntry(path.resolve(reactEntrySourcePath, "app/*.ts"), 'ts', 'app'),
+        output: {
+            path: path.resolve(reactEntryOutputPath, 'app'),
+            filename: '[name].js'
+        },
+        resolve: {
+            extensions: [".ts", ".tsx", ".js", ".json"],
+        },
+        plugins: [
+            new CleanWebpackPlugin([path.resolve(reactEntryOutputPath, 'app')])
+        ]
     }
-
-
 }

webpack.debug.js

@@ -7,9 +7,11 @@ var common_stuff = {
 }
 
 module.exports = [
-    merge(common.base, common_stuff),
     merge(common.translations, common_stuff),
+    merge(common.base, common_stuff),
+
     merge(common.button, common_stuff),
-    merge(common.css, common_stuff)
+    merge(common.css, common_stuff),
+    merge(common.react, common_stuff),
 ]
 

webpack.production.js

@@ -14,8 +14,9 @@ const common_stuff = {
 }
 
 module.exports = [
-    merge(common.base, common_stuff),
     merge(common.translations, common_stuff),
+    merge(common.base, common_stuff),
     merge(common.button, common_stuff),
-    merge(common.css, common_stuff)
+    merge(common.css, common_stuff),
+    merge(common.react, common_stuff),
 ]