lincd-cli 0.1.14 → 0.1.16

package/defaults/{app3/.env-cmdrc → app-with-backend/.env-cmdrc.json}

@@ -6,7 +6,7 @@
 	},
 	"prod": {
       "NODE_ENV":"production",
-      "SITE_ROOT":"[define me in .env-cmdrc]",
+      "SITE_ROOT":"[define me in .env-cmdrc.json]",
       "DATA_ROOT": "http://localhost:4000/data"
 	}
 }

package/defaults/app-with-backend/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    ["@babel/preset-react", {"runtime": "automatic"}],
+    "@babel/preset-typescript",
+  ],
+  plugins: [
+    "@babel/plugin-transform-runtime"
+  ],
+};

package/defaults/app-with-backend/backend/server.js

@@ -0,0 +1,5 @@
+'use strict';
+require('@babel/register')({ extensions: ['.ts', '.tsx'] });
+const LincdServer = require("lincd-server/lib/shapes/LincdServer");
+let server = new LincdServer.LincdServer({ loadAppComponent: () => require("../frontend/src/App").default });
+server.start();

package/defaults/{app3 → app-with-backend}/frontend/scripts/build.js

@@ -1,17 +1,8 @@
 'use strict';
-
-const webpack = require('webpack');
+const webpack = require("webpack");
+const config = require("lincd-server/site.webpack.config");
 const chalk = require('chalk');
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-let webpackConfig = require("./webpack-config");
-
-// Can be overwritten by environment variables
-// Should relate to express.static in server.ts, which makes the build files available through a URL
-const ASSET_PATH = process.env.ASSET_PATH || '/js/';
-
-webpack(webpackConfig(),(err, stats) => {
+webpack(config, (err, stats) => { // [Stats Object](#stats-object)
   if (err) {
     console.error(err.stack || err);
     if (err.details) {
@@ -25,10 +16,19 @@ webpack(webpackConfig(),(err, stats) => {
     console.log('Finished running webpack with errors.');
     info.errors.forEach((e) => console.error(e));
   } else {
-    console.log(chalk.green('Finished running webpack.'));
+    // console.log(chalk.green('Finished running webpack.'));
+    console.log(stats.toString({
+      chunks:false,
+      assets:true,
+      entryPoints:false,
+      modules:false,
+      moduleAssets:false,
+      moduleChunks:false,
+      colors: true,
+    }));
     // console.log(
     // 	chalk.green('\t'+Object.keys(stats.compilation.assets).join('\n\t')),
     // );
   }
-});
-
+  process.exit();
+});

package/defaults/app-with-backend/frontend/src/App.scss

@@ -0,0 +1,45 @@
+.error {
+  color: white;
+  margin: 2rem;
+
+  pre {
+    white-space: pre-wrap;
+    padding: 1rem;
+  }
+}
+
+.content {
+  display: block;
+  background-color: #f3f3f3;
+  box-shadow: 2px 2px 2px rgba(68, 68, 68, 0.3);
+  padding: 1rem;
+  margin: 1rem 0;
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    margin: 0.5rem 0;
+
+    pre {
+      padding: 1rem;
+      background-color: #bfe7fc;
+    }
+  }
+}
+
+.main {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  width: 66.6%;
+  margin: auto;
+}
+
+.header {
+  display: block;
+}
+
+.menu {
+  margin: 1rem 0;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 1rem;
+}

package/defaults/app-with-backend/frontend/src/App.scss.json

@@ -0,0 +1 @@
+{"error":"${name}_App_error","content":"${name}_App_content","main":"${name}_App_main","header":"${name}_App_header","menu":"${name}_App_menu"}

package/defaults/app-with-backend/frontend/src/App.tsx

@@ -0,0 +1,123 @@
+import {Link} from 'react-router-dom';
+import {lazy, Suspense} from 'react';
+import {ErrorBoundary} from 'react-error-boundary';
+import Spinner from './components/Spinner';
+import {Route, Routes} from 'react-router-dom';
+import {Storage} from 'lincd/lib/utils/Storage';
+import {FrontendFileStore} from 'lincd-server/lib/shapes/FrontendFileStore';
+
+//Note that by default LINCD apps are set up with support for SCSS (sass) and CSS Modules
+//So any .scss file needs to be imported by itself
+import "./App.scss";
+//and then the .scss.json file needs to be imported to access the class names (this file will be automatically generated)
+import style from "./App.scss.json";
+
+//In React 18 you can use 'lazy' to import pages only when you need them.
+//This will cause webpack to create multiple bundles, and the right one is automatically loaded
+const Home = lazy(() => import('./pages/Home' /* webpackPrefetch: true */));
+const Page1 = lazy(() => import('./pages/Page1' /* webpackPrefetch: true */));
+
+//store all quads in a file on the backend named 'main'
+let store = new FrontendFileStore('main');
+Storage.setDefaultStore(store);
+
+declare var window;
+export default function App({assets = typeof window !== 'undefined' ? window['assetManifest'] : {}}) {
+  return (
+    <Html assets={assets} title="${name} - LINCD App">
+      <Suspense fallback={<Spinner />}>
+        <ErrorBoundary FallbackComponent={Error}>
+          <Content />
+        </ErrorBoundary>
+      </Suspense>
+    </Html>
+  );
+}
+
+function Content() {
+  return (
+    <Layout>
+      <div className={style.content}>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <Suspense fallback={<Spinner />}>
+                <Home />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/page1"
+            element={
+              <Suspense fallback={<Spinner />}>
+                <Page1 />
+              </Suspense>
+            }
+          />
+        </Routes>
+      </div>
+    </Layout>
+  );
+}
+
+function Error({error}) {
+  return (
+    <div className={style.error}>
+      <h1>Application Error</h1>
+      <pre>{error.stack}</pre>
+    </div>
+  );
+}
+
+function Layout({children}) {
+  return (
+    <main className={style.main}>
+      <Header />
+      {children}
+    </main>
+  );
+}
+
+function Header()
+{
+  return (
+    <header className={style.header}>
+      <h1>${name}</h1>
+      <nav className={style.menu}>
+        <Link to="/">Home</Link>
+        <Link to="/page1">Page 1</Link>
+      </nav>
+    </header>
+  );
+}
+
+function Html({assets, children, title}) {
+  return (
+    <html lang="en">
+    <head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="shortcut icon" href="/static/favicon.ico" />
+      <link rel="stylesheet" href={assets['main.css']} />
+      {assets['tailwind-cdn'] && (
+        <script src={assets['tailwind-cdn']}></script>
+      )}
+      <title>{title}</title>
+    </head>
+    <body>
+    <noscript
+      dangerouslySetInnerHTML={{
+        __html: `<b>Enable JavaScript to run this app.</b>`,
+      }}
+    />
+    {children}
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `assetManifest = ${JSON.stringify(assets)};`,
+      }}
+    />
+    </body>
+    </html>
+  );
+}

package/defaults/{app3 → app-with-backend}/frontend/src/components/Spinner.scss

@@ -1,5 +1,4 @@
-
-.spinner.spinner--active {
+.spinner.active {
   border: 4px solid #474545;
   border-top: 4px solid lightblue;
   border-radius: 50%;

package/defaults/app-with-backend/frontend/src/components/Spinner.scss.json

@@ -0,0 +1 @@
+{"spinner":"${name}_Spinner_spinner","active":"${name}_Spinner_active","spin":"${name}_Spinner_spin"}

package/defaults/{app3 → app-with-backend}/frontend/src/components/Spinner.tsx

@@ -2,7 +2,7 @@ import './Spinner.scss';
 export default function Spinner({active = true}) {
   return (
     <div
-      className={['spinner', active && 'spinner--active'].join(' ')}
+      className={['spinner', active && 'active'].join(' ')}
       role="progressbar"
       aria-busy={active ? 'true' : 'false'}
     />

package/defaults/{app3 → app-with-backend}/frontend/src/index.tsx

@@ -6,10 +6,6 @@ import {BrowserRouter} from 'react-router-dom';
 import App from './App';
 import React from 'react';
 
-//comment out if you don't want to use tailwind
-import './_tailwind.scss';
-
-
 hydrateRoot(
   document,
   <React.StrictMode>

package/defaults/app-with-backend/frontend/src/pages/Home.tsx

@@ -0,0 +1,14 @@
+export default function Home() {
+  return (
+    <div>
+      <h2>Get started</h2>
+      <p>
+        Your LINCD App is ready to go!<br />
+        To edit this file, open:
+        </p>
+        <code>
+          <pre>/frontend/src/pages/Home.tsx</pre>
+        </code>
+    </div>
+  );
+}

package/defaults/app-with-backend/frontend/src/pages/Page1.tsx

@@ -0,0 +1,7 @@
+export default function Page1() {
+  return (
+    <div>
+      <h2>Page 1</h2>
+    </div>
+  );
+}

package/defaults/{app3 → app-with-backend}/package.json

@@ -12,15 +12,9 @@
   "license": "MIT",
   "scripts": {
     "start": "npm run server:dev",
-    "start-full": "concurrently --names \"_TSC,SERV\" \"npm run tsc\" \"npm run server:dev\"",
-    "build:prod": "npm run bundler:prod && npm run tsc:prod",
-    "server:dev": "env-cmd -e dev nodemon --watch ../../modules/lincd-server/lib --delay 0.5 ./backend/server.js",
-    "server:prod": "env-cmd -e prod nodemon -e js,json --delay 1 ./backend/server.js",
-    "tsc": "cross-env NODE_ENV=development tsc --watch --project ./tsconfig.json",
-    "tsc:prod": "cross-env NODE_ENV=production tsc --project ./tsconfig.json",
-    "bundler:dev": "cross-env NODE_ENV=development nodemon --watch frontend/scripts frontend/scripts/build.js",
-    "bundler:prod": "cross-env NODE_ENV=production node frontend/scripts/build.js",
-    "setup": "cross-env NODE_ENV=development tsc --project ./tsconfig.json"
+    "build": "env-cmd -e prod node frontend/scripts/build.js",
+    "server:dev": "env-cmd -e dev nodemon --watch ../../modules/lincd-server/lib --watch ../../modules/lincd-server/site.webpack.config.js ./backend/server.js",
+    "server:prod": "env-cmd -e prod nodemon -e js,json s ./backend/server.js"
   },
   "keywords": [
     "lincd",
@@ -30,7 +24,15 @@
     "web3"
   ],
   "dependencies": {
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.19.1",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/register": "^7.18.9",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "babel-loader": "^8.2.5",
     "fork-ts-checker-webpack-plugin": "6.2.6",
     "is-object": "^1.0.2",
     "lincd": "^0.3",
@@ -69,9 +71,8 @@
     "resolve": "1.12.0",
     "sass-loader": "^10.0",
     "tailwindcss": "^3.0.24",
-    "ts-loader": "^8.0.12",
     "typescript": "4.6.4",
-    "webpack": "4.44.2",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.2.0"
   }
 }

package/lib/cli.js

@@ -834,17 +834,17 @@ var createApp = function (name, basePath) {
                     if (!fs.existsSync(targetFolder)) {
                         fs.mkdirSync(targetFolder);
                     }
-                    fs.copySync(path.join(__dirname, '..', 'defaults', 'app3'), targetFolder);
+                    fs.copySync(path.join(__dirname, '..', 'defaults', 'app-with-backend'), targetFolder);
                     // fs.copySync(path.join(__dirname, '..', 'defaults', 'app'), targetFolder);
                     log("Creating new LINCD application '" + name + "'");
                     //replace variables in some of the copied files
-                    replaceVariablesInFilesWithRoot(targetFolder, 'package.json', 'frontend/src/App.tsx', 'frontend/src/Header.tsx', 'frontend/src/pages/Home.tsx');
+                    replaceVariablesInFilesWithRoot(targetFolder, 'package.json', 'frontend/src/App.tsx', 'frontend/src/App.scss.json', 'frontend/src/components/Spinner.scss.json');
                     return [4 /*yield*/, hasYarnInstalled()];
                 case 1:
                     hasYarn = _b.sent();
                     installCommand = hasYarn ? 'yarn install' : 'npm install';
                     runCommand = hasYarn ? 'yarn' : 'npm run';
-                    return [4 /*yield*/, execp("cd ".concat(hyphenName, " && ").concat(installCommand, " && ").concat(runCommand, " setup"), true)["catch"](function (err) {
+                    return [4 /*yield*/, execp("cd ".concat(hyphenName, " && ").concat(installCommand), true)["catch"](function (err) {
                             console.warn('Could not install dependencies or start application');
                         })];
                 case 2:

package/lib/config-grunt.js

@@ -168,10 +168,7 @@ function setupGrunt(grunt, moduleName, config) {
             options: {
                 stats: {
                     chunks: false,
-                    version: false,
-                    warningsFilter: function (warning) {
-                        return warning.indexOf('There are multiple modules') !== -1;
-                    }
+                    version: false
                 }
             },
             dev: (0, config_webpack_1.generateWebpackConfig)('dev', moduleName, Object.assign({

package/lib/config-webpack.js

@@ -20,20 +20,22 @@ var externalise_modules_1 = __importDefault(require("./plugins/externalise-modul
 var watch_run_1 = __importDefault(require("./plugins/watch-run"));
 var utils_1 = require("./utils");
 var colors = require("colors");
+// console.log('Webpack '+require('webpack/package.json').version);
+// console.log('ts-loader '+require('ts-loader/package.json').version);
 var fs = require('fs');
 var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 var chalk = require('chalk');
 var webpack = require('webpack');
 var path = require('path');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var WebpackLicencePlugin = require('webpack-license-plugin');
-var TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+// const WebpackLicencePlugin = require('webpack-license-plugin');
+// const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 var TerserPlugin = require('terser-webpack-plugin');
 var exec = require('child_process').exec;
 var NODE_ENV = process.env.NODE_ENV;
 var nodeProduction = NODE_ENV == 'production';
 // const libraryName = 'lincd';
+process.traceDeprecation = true;
 function generateWebpackConfig(buildName, moduleName, config) {
     if (config === void 0) { config = {}; }
     if (!config.externals)
@@ -59,21 +61,22 @@ function generateWebpackConfig(buildName, moduleName, config) {
     }
     var tsConfig = JSON.parse(fs.readFileSync(configFile));
     var plugins = [
-        new webpack.DefinePlugin({
-            'process.env.BROWSER': JSON.stringify(true),
-            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
-        }),
-        new webpack.NoEmitOnErrorsPlugin(),
-        new ExtractTextPlugin(config.cssFileName ? config.cssFileName : cleanModuleName + '.css'),
+        // new webpack.DefinePlugin({
+        //   'process.env.BROWSER': JSON.stringify(true),
+        //   'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        // }),
+        // new webpack.NoEmitOnErrorsPlugin(),
+        // new ExtractTextPlugin(config.cssFileName ? config.cssFileName : cleanModuleName + '.css'),
         new MiniCssExtractPlugin({
             // linkType: false,
             filename: config.cssFileName ? config.cssFileName : cleanModuleName + '.css'
         }),
-        new WebpackLicencePlugin({
-            excludedPackageTest: function (packageName, version) {
-                return packageName.indexOf('lincd') !== -1;
-            }
-        }),
+        //currently not compatible with webpack 5
+        // new WebpackLicencePlugin({
+        //   excludedPackageTest: (packageName, version) => {
+        //     return packageName.indexOf('lincd') !== -1;
+        //   },
+        // }),
     ];
     if (config.debug) {
         plugins.push(new watch_run_1["default"]());
@@ -114,12 +117,12 @@ function generateWebpackConfig(buildName, moduleName, config) {
             debug: 'debug' in config ? config.debug : false
         }));
     }
-    var resolvePlugins = [
-        new TsconfigPathsPlugin({
-            configFile: configFile,
-            silent: true
-        }),
-    ];
+    // var resolvePlugins = [
+    // new TsconfigPathsPlugin({
+    //   configFile: configFile,
+    //   silent: true,
+    // }),
+    // ];
     var aliases = config.alias || {};
     var rules = [
         {
@@ -142,7 +145,7 @@ function generateWebpackConfig(buildName, moduleName, config) {
                                 'postcss-nested': {},
                                 // "postcss-scss": {}, //<-- only add this back if the build gets stuck on //comments in scss files, but I dont think that will be the case anymore
                                 'postcss-modules': {
-                                    //by default postcss-modules will put out a json file right next to the original css / scss file, this method defines what classnames to use
+                                    //   //by default postcss-modules will put out a json file right next to the original css / scss file, this method defines what classnames to use
                                     generateScopedName: utils_1.generateScopedName,
                                     globalModulePaths: [/tailwind/]
                                 },
@@ -177,6 +180,30 @@ function generateWebpackConfig(buildName, moduleName, config) {
                 },
             ]
         },
+        // {
+        //   test: /\.(ts|tsx)$/,
+        //   exclude: /node_modules/,
+        //   //include: [path.join(process.cwd(),"frontend")], // only bundle files in this directory
+        //   use: {
+        //     loader: "babel-loader", // cf. .babelrc.json in this folder and browser list in package.json
+        //     options: {
+        //       // plugins: productionMode ? [] : ["react-refresh/babel"],
+        //       cacheCompression: false,
+        //       cacheDirectory: true,
+        //       presets: [
+        //         "@babel/preset-env",
+        //         ["@babel/preset-react", {"runtime": "automatic"}],
+        //         "@babel/preset-typescript",
+        //       ],
+        //       plugins: [
+        //         "@babel/plugin-transform-runtime",
+        //         ["@babel/plugin-proposal-decorators",{
+        //           decoratorsBeforeExport:true
+        //         }]
+        //       ],
+        //     },
+        //   },
+        // },
         {
             test: /\.tsx?$/,
             use: [
@@ -194,15 +221,15 @@ function generateWebpackConfig(buildName, moduleName, config) {
                 },
             ]
         },
-        {
-            enforce: 'pre',
-            test: /\.js$/,
-            use: [
-                {
-                    loader: 'source-map-loader'
-                },
-            ]
-        },
+        // {
+        //   enforce: 'pre',
+        //   test: /\.js$/,
+        //   use: [
+        //     {
+        //       loader: 'source-map-loader',
+        //     },
+        //   ],
+        // },
     ];
     if (es5 && config.internalsources && config.internalsources.length > 0) {
         //usually a module that transpiles to es5 will only have es5 code in the bundle.
@@ -211,7 +238,7 @@ function generateWebpackConfig(buildName, moduleName, config) {
         //so we fix that here by just referring directly to the typescript source instead of the transpiled js for internalised modules
         //however this means that for internalised modules THE SOURCE CODE NEEDS TO BE AVAILABLE. This is currently NOT the case with how we publish modules to yarn
         //so that means internalised modules need to be LOCALLY AVAILABLE with yarn workspaces
-        plugins.push(new webpack.NormalModuleReplacementPlugin(/\lincd\/lib\//, function (resource, match) {
+        plugins.push(new webpack.NormalModuleReplacementPlugin(/lincd\/lib\//, function (resource, match) {
             var moduleName = resource.request.match(/lincd\/lib\//)[1];
             if (config.internalsources.indexOf(moduleName) !== -1) {
                 console.log(colors.magenta('internal sources + ES5: Replacing /lib/ with /src/  for source-internalised module ' + moduleName));
@@ -228,17 +255,17 @@ function generateWebpackConfig(buildName, moduleName, config) {
             path: path.resolve(process.cwd(), config.bundlePath || 'dist'),
             devtoolModuleFilenameTemplate: moduleName + '/[resource-path]'
         },
-        devtool: productionMode ? 'cheap-source-map' : 'cheap-source-map',
+        devtool: productionMode ? 'source-map' : 'cheap-module-source-map',
+        // devtool: productionMode ? 'cheap-source-map' : 'cheap-source-map',
         mode: productionMode ? 'production' : 'development',
         //fixing a persistent but strange build error here that showed up once, this is a workaround. See: https://github.com/webpack-contrib/css-loader/issues/447
-        node: {
-            fs: 'empty',
-            child_process: 'empty'
-        },
+        // node: {
+        //   fs: 'empty',
+        //   child_process: 'empty',
+        // },
         resolve: {
             extensions: ['.webpack.js', '.js', '.ts', '.tsx', '.json'],
-            alias: aliases,
-            plugins: resolvePlugins
+            alias: aliases
         },
         resolveLoader: {
             modules: [
@@ -269,12 +296,19 @@ function generateWebpackConfig(buildName, moduleName, config) {
         externals: (0, externalise_modules_1["default"])(config, es5),
         plugins: plugins,
         stats: {
-            errorDetails: config.debug,
+            errorDetails: true,
             chunks: false,
-            children: false,
+            children: true,
             version: true,
             hash: false,
+            entrypoints: false,
             modules: false
+        },
+        //hide some info from output when in watch mode to keep it succinct
+        //stats:{chunks:!watch,version:!watch}//hide some info from output when in watch mode to keep it succinct
+        cache: {
+            // https://webpack.js.org/configuration/other-options/#cache
+            type: "filesystem"
         }
     };
 }