lincd-cli 0.1.13 → 0.1.15

package/defaults/app/src/App.scss

@@ -0,0 +1,3 @@
+.app {
+  display:block;
+}

package/defaults/app/src/App.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+export function App()
+{
+  return <div className="app">${name} - LINCD App</div>;
+}

package/defaults/app/src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import {App} from './App';
+
+declare var document;
+if (typeof document !== 'undefined') {
+  const container = document.getElementById('root');
+  const root = createRoot(container!);
+  root.render(<App></App>);
+}

package/defaults/app/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": true,
+    "target": "es6",
+    "outDir": "lib",
+    "declaration": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "baseUrl": "./",
+    "rootDir": "src"
+  },
+  "files": ["./src/index.tsx"]
+}

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/app-with-backend/frontend/src/components/Spinner.scss

@@ -0,0 +1,16 @@
+.spinner.active {
+  border: 4px solid #474545;
+  border-top: 4px solid lightblue;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

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/app-with-backend/frontend/src/components/Spinner.tsx

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

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

@@ -0,0 +1,16 @@
+window['$RefreshReg$'] = () => {};
+window['$RefreshSig$'] = () => () => {};
+
+import {hydrateRoot} from 'react-dom/client';
+import {BrowserRouter} from 'react-router-dom';
+import App from './App';
+import React from 'react';
+
+hydrateRoot(
+  document,
+  <React.StrictMode>
+    <BrowserRouter>
+      <App assets={window['assetManifest']} />
+    </BrowserRouter>
+  </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/defaults/app-with-backend/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "target": "es2019",
+    "declaration": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "types": ["node", "react", "react-dom"],
+    "pretty": true
+  },
+  "files": ["./frontend/src/index.tsx"]
+}

package/defaults/module/Gruntfile.js

@@ -0,0 +1,16 @@
+var buildTools = require('lincd-cli');
+module.exports = buildTools.generateGruntConfig('${module_name}', {
+	externals: {
+		react: 'React',
+		'react-dom': 'ReactDOM',
+	}, //list of non lincd modules that are already loaded and made globally available by one of the dependencies of this module
+	//internals: [],//list of lincd modules that you want to INCLUDE in the bundle (as opposed to the module its own bundle being a dependency)
+	//alias:{},//webpack alias -> maps on type of npm path to another
+	//target:"es5"|"es6",
+	//environment:"server"|"frontend",
+	//outputPath:string,
+	//es5Server:boolean
+	//es5:{},//es5 specific config, use same properties as above
+	//es6:{},//es6 specific config, use same properties as above
+	//debug:false,//debug the build process
+});

package/defaults/module/src/components/ExampleComponent.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import {ExampleShapeClass} from "../shapes/ExampleShapeClass";
+import {linkedComponentClass,linkedComponent} from '../module';
+import {LinkedComponentClass} from 'lincd/lib/utils/LinkedComponentClass';
+
+export const ExampleComponent = linkedComponent<ExampleShapeClass>(ExampleShapeClass, ({source, sourceShape}) => {
+  //note that typescript knows that person has the type of the Shape you provided
+  return <div></div>;
+});
+
+//alternatively, use a Class component if you prefer:
+/*@linkedComponentClass(ExampleShapeClass)
+export class ExampleComponent extends LinkedComponentClass<ExampleShapeClass> {
+  render() {
+    let exampleInstance = this.sourceShape;
+
+    //get the name of this item from the graph
+    return <h1>Hello {exampleInstance.name}!</h1>;
+  }
+}*/

package/defaults/module/src/data/example-ontology.json

@@ -0,0 +1,20 @@
+{
+  "@context": {
+    "dc": "http://purl.org/dc/elements/1.1/",
+    "owl": "http://www.w3.org/2002/07/owl#",
+    "rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
+    "rdfs": "http://www.w3.org/2000/01/rdf-schema#",
+    "${hyphen_name}": "${uri_base}"
+  },
+  "@graph": [
+    {
+      "@id": "${hyphen_name}:ExampleClass",
+      "@type": "rdfs:Class",
+      "rdfs:comment": "This is an example class. You can remove or rename it",
+      "rdfs:isDefinedBy": {
+        "@id": "${hyphen_name}:"
+      },
+      "rdfs:label": "Example Class"
+    }
+  ]
+}

package/defaults/module/src/data/example-ontology.json.d.ts

@@ -0,0 +1 @@
+export var json: string;

package/defaults/module/src/index.ts

@@ -0,0 +1,7 @@
+import './ontologies/${hyphen_name}';
+
+//SHAPES FIRST
+import './shapes/ExampleShapeClass';
+
+//THEN COMPONENTS
+import './components/ExampleComponent';

package/defaults/module/src/module.ts

@@ -0,0 +1,4 @@
+import {linkedModule} from 'lincd/lib/utils/Module';
+
+export const {linkedComponent, linkedComponentClass, linkedShape, linkedUtil, linkedOntology} =
+  linkedModule('${module_name}');

package/defaults/module/src/ontologies/example-ontology.ts

@@ -0,0 +1,36 @@
+import {NamedNode} from 'lincd/lib/models';
+import {JSONLD} from 'lincd-jsonld/lib/utils/JSONLD';
+import {createNameSpace} from 'lincd/lib/utils/NameSpace';
+import {linkedOntology} from '../module';
+//import all the exports of this file as one variable called _this (we need this at the end)
+import * as _this from './${hyphen_name}';
+
+/**
+ * Load the data of this ontology into memory, thus adding the properties of the entities of this ontology to the local graph.
+ */
+export var loadData = () => {
+  return import('../data/${hyphen_name}.json').then((data) => JSONLD.parse(data));
+};
+
+/**
+ * The namespace of this ontology, which can be used to create NamedNodes with URI's not listed in this file
+ */
+export var ns = createNameSpace('${uri_base}');
+
+/**
+ * The NamedNode of the ontology itself
+ */
+export var _self: NamedNode = ns('');
+
+//A list of all the entities (Classes & Properties) of this ontology, each exported as a NamedNode
+export var ExampleClass: NamedNode = ns('ExampleClass');
+export var exampleProperty: NamedNode = ns('exampleProperty');
+
+//An extra grouping object so all the entities can be accessed from the prefix/name
+export const ${camel_name} = {
+  ExampleClass,
+  exampleProperty,
+};
+
+//Registers this ontology to LINCD.JS, so that data loading can be automated amongst other things
+linkedOntology(_this, ns, '${hyphen_name}', loadData, '../data/${hyphen_name}.json');

package/defaults/module/src/shapes/ExampleShapeClass.ts

@@ -0,0 +1,29 @@
+import {Shape} from 'lincd/lib/shapes/Shape';
+import {Literal, NamedNode} from 'lincd/lib/models';
+import {linkedShape} from '../module';
+import {literalProperty} from 'lincd/lib/utils/ShapeDecorators';
+import {${camel_name}} from '../ontologies/${hyphen_name}';
+
+@linkedShape
+export class ExampleShapeClass extends Shape {
+  /**
+   * indicates that instances of this shape need to have this rdf.type
+   */
+  static targetClass: NamedNode = ${camel_name}.ExampleClass;
+
+  /**
+   * instances of this shape need to have exactly one value defined for the given property
+   */
+  @literalProperty({
+    path: ${camel_name}.exampleProperty,
+    required: true,
+    maxCount: 1,
+  })
+  get name() {
+    return this.getValue(${camel_name}.exampleProperty);
+  }
+
+  set name(val: string) {
+    this.overwrite(${camel_name}.exampleProperty, new Literal(val));
+  }
+}

package/defaults/module/tsconfig-es5.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": true,
+    "target": "es5",
+    "outDir": "lib",
+    "declaration": false,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "baseUrl": "./",
+    "rootDir": "src"
+  },
+  "files": ["./src/index.ts"]
+}

package/defaults/module/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": true,
+    "target": "es6",
+    "outDir": "lib",
+    "declaration": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "baseUrl": "./",
+    "rootDir": "src"
+  },
+  "files": ["./src/index.ts"]
+}

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({