lincd-cli 0.2.29 → 0.2.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/defaults/app-with-backend/.env-cmdrc.json +8 -5
- package/defaults/app-with-backend/.eslintignore +3 -0
- package/defaults/app-with-backend/.eslintrc.json +42 -0
- package/defaults/app-with-backend/.husky/post-merge +4 -0
- package/defaults/app-with-backend/.husky/pre-commit +4 -0
- package/defaults/app-with-backend/.prettierignore +4 -0
- package/defaults/app-with-backend/.prettierrc.json +24 -0
- package/defaults/app-with-backend/lincd.config.js +3 -0
- package/defaults/app-with-backend/package.json +29 -18
- package/defaults/app-with-backend/{frontend/scripts → scripts}/build.js +2 -2
- package/defaults/app-with-backend/scripts/prepare.js +16 -0
- package/defaults/app-with-backend/scripts/start-server.js +13 -0
- package/defaults/app-with-backend/src/App.scss +6 -0
- package/defaults/app-with-backend/src/App.scss.json +1 -0
- package/defaults/app-with-backend/src/App.tsx +31 -0
- package/defaults/app-with-backend/{frontend/src → src}/backend.ts +1 -1
- package/defaults/app-with-backend/src/components/Error.scss +9 -0
- package/defaults/app-with-backend/src/components/Error.scss.json +1 -0
- package/defaults/app-with-backend/src/components/Error.tsx +14 -0
- package/defaults/app-with-backend/{frontend/src → src}/components/Spinner.scss +1 -0
- package/defaults/app-with-backend/src/components/Spinner.scss.json +1 -0
- package/defaults/app-with-backend/{frontend/src → src}/components/Spinner.tsx +3 -2
- package/defaults/app-with-backend/{frontend/src → src}/index.tsx +15 -10
- package/defaults/app-with-backend/src/layout/DefaultLayout.scss +6 -0
- package/defaults/app-with-backend/src/layout/DefaultLayout.scss.json +1 -0
- package/defaults/app-with-backend/src/layout/DefaultLayout.tsx +13 -0
- package/defaults/app-with-backend/src/layout/Header.scss +10 -0
- package/defaults/app-with-backend/src/layout/Header.scss.json +1 -0
- package/defaults/app-with-backend/src/layout/Header.tsx +16 -0
- package/defaults/app-with-backend/src/package.ts +14 -0
- package/defaults/app-with-backend/src/pages/Home.scss +15 -0
- package/defaults/app-with-backend/src/pages/Home.scss.json +1 -0
- package/defaults/app-with-backend/src/pages/Home.tsx +21 -0
- package/defaults/app-with-backend/src/pages/Page1.tsx +11 -0
- package/defaults/app-with-backend/src/routes.tsx +40 -0
- package/defaults/app-with-backend/src/scss/global-overwrites.scss +11 -0
- package/defaults/app-with-backend/src/scss/variables.scss +23 -0
- package/defaults/app-with-backend/tsconfig.json +2 -2
- package/defaults/app-with-backend/web/favicon-144x144.png +0 -0
- package/defaults/app-with-backend/web/favicon-57x57.png +0 -0
- package/defaults/app-with-backend/web/favicon-72x72.png +0 -0
- package/lib/cli-methods.js +36 -9
- package/package.json +1 -1
- package/defaults/app-with-backend/backend/server.js +0 -6
- package/defaults/app-with-backend/frontend/src/App.scss +0 -42
- package/defaults/app-with-backend/frontend/src/App.scss.json +0 -1
- package/defaults/app-with-backend/frontend/src/App.tsx +0 -130
- package/defaults/app-with-backend/frontend/src/components/Spinner.scss.json +0 -1
- package/defaults/app-with-backend/frontend/src/package.ts +0 -3
- package/defaults/app-with-backend/frontend/src/pages/Home.tsx +0 -15
- package/defaults/app-with-backend/frontend/src/pages/Page1.tsx +0 -7
- /package/defaults/app-with-backend/{frontend/web → web}/favicon.ico +0 -0
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
{
|
|
2
|
+
"_main" : {
|
|
3
|
+
"DATA_ROOT": "https://app.${hyphen_name}.com/data",
|
|
4
|
+
"APP_NAME": "${name}",
|
|
5
|
+
"SOURCE_PATH" : "./src"
|
|
6
|
+
},
|
|
2
7
|
"development": {
|
|
3
8
|
"NODE_ENV": "development",
|
|
4
|
-
"SITE_ROOT": "http://localhost:4000"
|
|
5
|
-
"DATA_ROOT": "http://localhost:4000/data"
|
|
9
|
+
"SITE_ROOT": "http://localhost:4000"
|
|
6
10
|
},
|
|
7
11
|
"production": {
|
|
8
12
|
"NODE_ENV": "production",
|
|
9
|
-
"SITE_ROOT": "
|
|
10
|
-
"DATA_ROOT": "http://localhost:4000/data"
|
|
13
|
+
"SITE_ROOT": "https://app.${hyphen_name}.com/data"
|
|
11
14
|
}
|
|
12
|
-
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"env": {
|
|
3
|
+
"browser": true,
|
|
4
|
+
"es2021": true,
|
|
5
|
+
"jest": true
|
|
6
|
+
},
|
|
7
|
+
"extends": [
|
|
8
|
+
"plugin:react/recommended",
|
|
9
|
+
"plugin:@typescript-eslint/recommended",
|
|
10
|
+
"prettier",
|
|
11
|
+
"plugin:import/recommended"
|
|
12
|
+
],
|
|
13
|
+
"overrides": [],
|
|
14
|
+
"parser": "@typescript-eslint/parser",
|
|
15
|
+
"parserOptions": {
|
|
16
|
+
"ecmaFeatures": {
|
|
17
|
+
"jsx": true
|
|
18
|
+
},
|
|
19
|
+
"ecmaVersion": 12,
|
|
20
|
+
"sourceType": "module"
|
|
21
|
+
},
|
|
22
|
+
"plugins": [ "react", "@typescript-eslint", "react-hooks" ],
|
|
23
|
+
"rules": {
|
|
24
|
+
"no-use-before-define": "off",
|
|
25
|
+
"@typescript-eslint/no-use-before-define": [ "error" ],
|
|
26
|
+
"react/jsx-filename-extension": [ "warn", { "extensions": [ ".tsx" ] } ],
|
|
27
|
+
"import/extensions": [ "error", "ignorePackages", { "ts": "never", "tsx": "never" } ],
|
|
28
|
+
"no-shadow": "off",
|
|
29
|
+
"@typescript-eslint/no-shadow": [ "error" ],
|
|
30
|
+
"@typescript-eslint/explicit-function-return-type": [ "error", { "allowExpressions": true } ],
|
|
31
|
+
"max-len": [ "warn", { "code": 100, "ignoreComments": true, "ignoreUrls": true } ],
|
|
32
|
+
"react-hooks/rules-of-hooks": "error",
|
|
33
|
+
"react-hooks/exhaustive-deps": "warn",
|
|
34
|
+
"import/prefer-default-export": "off",
|
|
35
|
+
"react/prop-types": "off"
|
|
36
|
+
},
|
|
37
|
+
"settings": {
|
|
38
|
+
"import/resolver": {
|
|
39
|
+
"typescript": {}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"printWidth": 80,
|
|
3
|
+
"tabWidth": 2,
|
|
4
|
+
"bracketSpacing": false,
|
|
5
|
+
"useTabs": false,
|
|
6
|
+
"semi": true,
|
|
7
|
+
"singleQuote": true,
|
|
8
|
+
"trailingComma": "all",
|
|
9
|
+
"endOfLine": "auto",
|
|
10
|
+
"overrides": [
|
|
11
|
+
{
|
|
12
|
+
"files": "*.json",
|
|
13
|
+
"options": {
|
|
14
|
+
"printWidth": 200
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"files": "*.jsonld",
|
|
19
|
+
"options": {
|
|
20
|
+
"parser": "json"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
]
|
|
24
|
+
}
|
|
@@ -13,13 +13,21 @@
|
|
|
13
13
|
"engines": {
|
|
14
14
|
"node": ">=16.0.0"
|
|
15
15
|
},
|
|
16
|
-
"main": "
|
|
16
|
+
"main": "scripts/start-server.js",
|
|
17
17
|
"license": "MIT",
|
|
18
18
|
"scripts": {
|
|
19
19
|
"start": "npm run server:dev",
|
|
20
|
-
"build": "env-cmd -e production node
|
|
21
|
-
"
|
|
22
|
-
"server:
|
|
20
|
+
"build": "env-cmd -e _main,production node scripts/build.js",
|
|
21
|
+
"postinstall": "husky install && echo 'Please run this command manually: node scripts/prepare.js'",
|
|
22
|
+
"server:dev": "env-cmd -e _main,development nodemon --quiet --watch ./src/index.tsx ./scripts/start-server.js",
|
|
23
|
+
"server:prod": "env-cmd -e _main,production node ./scripts/start-server.js",
|
|
24
|
+
"lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\""
|
|
25
|
+
},
|
|
26
|
+
"lint-staged": {
|
|
27
|
+
"*.{js,ts,scss,css}": [
|
|
28
|
+
"prettier --write",
|
|
29
|
+
"yarn lint"
|
|
30
|
+
]
|
|
23
31
|
},
|
|
24
32
|
"workspaces" : [
|
|
25
33
|
"packages/*"
|
|
@@ -34,18 +42,19 @@
|
|
|
34
42
|
"web3"
|
|
35
43
|
],
|
|
36
44
|
"dependencies": {
|
|
37
|
-
"@babel/cli": "^7.
|
|
38
|
-
"@babel/core": "^7.
|
|
39
|
-
"@babel/plugin-proposal-decorators": "^7.
|
|
40
|
-
"@babel/plugin-transform-runtime": "^7.
|
|
41
|
-
"@babel/preset-env": "^7.
|
|
42
|
-
"@babel/preset-react": "^7.
|
|
43
|
-
"@babel/preset-typescript": "^7.
|
|
44
|
-
"@babel/register": "^7.
|
|
45
|
-
"
|
|
46
|
-
"lincd
|
|
47
|
-
"lincd-
|
|
48
|
-
"lincd-server
|
|
45
|
+
"@babel/cli": "^7.22.9",
|
|
46
|
+
"@babel/core": "^7.22.9",
|
|
47
|
+
"@babel/plugin-proposal-decorators": "^7.22.7",
|
|
48
|
+
"@babel/plugin-transform-runtime": "^7.22.9",
|
|
49
|
+
"@babel/preset-env": "^7.22.9",
|
|
50
|
+
"@babel/preset-react": "^7.22.5",
|
|
51
|
+
"@babel/preset-typescript": "^7.22.5",
|
|
52
|
+
"@babel/register": "^7.22.5",
|
|
53
|
+
"chalk": "4.1.2",
|
|
54
|
+
"lincd": "^0.5.22",
|
|
55
|
+
"lincd-jsonld": "^0.1.21",
|
|
56
|
+
"lincd-server": "^0.1.39",
|
|
57
|
+
"lincd-server-utils": "^0.1.7",
|
|
49
58
|
"react": "^18.2",
|
|
50
59
|
"react-dom": "^18.2",
|
|
51
60
|
"react-error-boundary": "^3.1.3",
|
|
@@ -56,8 +65,10 @@
|
|
|
56
65
|
"@types/react": "^18.0.17",
|
|
57
66
|
"@types/react-dom": "^18.0.6",
|
|
58
67
|
"env-cmd": "^10.1.0",
|
|
68
|
+
"husky": "^8.0.0",
|
|
59
69
|
"lincd-cli": "^0.2",
|
|
60
|
-
"nodemon": "^2.0.
|
|
61
|
-
"pm2": "^5.3.0"
|
|
70
|
+
"nodemon": "^2.0.22",
|
|
71
|
+
"pm2": "^5.3.0",
|
|
72
|
+
"which": "^3.0.1"
|
|
62
73
|
}
|
|
63
74
|
}
|
|
@@ -35,8 +35,8 @@ webpack(config, async (err, stats) => {
|
|
|
35
35
|
// );
|
|
36
36
|
|
|
37
37
|
//build metadata (JSON-LD files containing metadata about the lincd components, shapes & ontologies in this app or its packages)
|
|
38
|
-
let updatedPaths = await buildMetadata();
|
|
39
|
-
console.log(chalk.green("Updated metadata:\n")+" - "+updatedPaths.map(p => chalk.magenta(p.replace(process.cwd(),''))).join("\n - "));
|
|
38
|
+
// let updatedPaths = await buildMetadata();
|
|
39
|
+
// console.log(chalk.green("Updated metadata:\n")+" - "+updatedPaths.map(p => chalk.magenta(p.replace(process.cwd(),''))).join("\n - "));
|
|
40
40
|
}
|
|
41
41
|
process.exit();
|
|
42
42
|
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const which = require('which');
|
|
3
|
+
const homedir = require('os').homedir();
|
|
4
|
+
const path = require('path');
|
|
5
|
+
|
|
6
|
+
which('node').then(resolved => {
|
|
7
|
+
try {
|
|
8
|
+
fs.writeFileSync(
|
|
9
|
+
path.join(homedir, '.huskyrc'),
|
|
10
|
+
`export PATH="${path.join(resolved, '..')}:$PATH"`,
|
|
11
|
+
);
|
|
12
|
+
} catch (err) {
|
|
13
|
+
console.log(err);
|
|
14
|
+
}
|
|
15
|
+
console.log('created .huskyrc in ' + homedir);
|
|
16
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
require('@babel/register')({extensions: ['.ts', '.tsx']});
|
|
3
|
+
const LincdServer = require('lincd-server/lib/shapes/LincdServer');
|
|
4
|
+
let lincdConfig = require("../lincd.config");
|
|
5
|
+
const {NodeFileStore} = require('lincd-server/lib/shapes/NodeFileStore');
|
|
6
|
+
const {Storage} = require('lincd/lib/utils/Storage');
|
|
7
|
+
|
|
8
|
+
//on the backend, we use a file store which stores all data as JSON-LD
|
|
9
|
+
let fileStore = new NodeFileStore(process.env.NODE_ENV+'-main');
|
|
10
|
+
Storage.setDefaultStore(fileStore);
|
|
11
|
+
|
|
12
|
+
let server = new LincdServer.LincdServer({loadAppComponent: () => require('../src/App').default,...lincdConfig});
|
|
13
|
+
server.start();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"App":"${underscore_name}_App_App","error":"${underscore_name}_App_error","content":"${underscore_name}_App_content","main":"${underscore_name}_App_main","header":"${underscore_name}_App_header","menu":"${underscore_name}_App_menu"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React, {Suspense} from 'react';
|
|
2
|
+
import {ErrorBoundary} from 'react-error-boundary';
|
|
3
|
+
import {Spinner} from './components/Spinner';
|
|
4
|
+
import {Error} from './components/Error';
|
|
5
|
+
import {AppRoot} from 'lincd-server-utils/lib/components/AppRoot';
|
|
6
|
+
import {Head} from 'lincd-server-utils/lib/components/Head';
|
|
7
|
+
import {Body} from 'lincd-server-utils/lib/components/Body';
|
|
8
|
+
import AppRoutes, {ROUTES} from './routes';
|
|
9
|
+
|
|
10
|
+
//Note that by default LINCD apps are set up with support for SCSS (sass) and CSS Modules
|
|
11
|
+
//So any .scss file needs to be imported by itself
|
|
12
|
+
import './App.scss';
|
|
13
|
+
//and then the .scss.json file needs to be imported to access the class names (this file will be automatically generated)
|
|
14
|
+
import style from './App.scss.json';
|
|
15
|
+
|
|
16
|
+
export default function App() {
|
|
17
|
+
return (
|
|
18
|
+
<AppRoot>
|
|
19
|
+
<Head>
|
|
20
|
+
{/* Add tags to html <head> here, for example, a font <link href='https://fonts.someapi.com/...' />*/}
|
|
21
|
+
</Head>
|
|
22
|
+
<Body routes={ROUTES} pageStyles={style} className={style.App}>
|
|
23
|
+
<Suspense fallback={<Spinner />}>
|
|
24
|
+
<ErrorBoundary FallbackComponent={Error}>
|
|
25
|
+
<AppRoutes />
|
|
26
|
+
</ErrorBoundary>
|
|
27
|
+
</Suspense>
|
|
28
|
+
</Body>
|
|
29
|
+
</AppRoot>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
//import all ShapeProviders here or define a generic BackendProvider, see documentation on https://docs.lincd.org
|
|
1
|
+
//import all ShapeProviders here or define a generic BackendProvider, see documentation on https://docs.lincd.org
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"error":"${underscore_name}_Error_error"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import style from './Error.scss.json';
|
|
3
|
+
import './Error.scss';
|
|
4
|
+
|
|
5
|
+
export function Error({error}) {
|
|
6
|
+
return (
|
|
7
|
+
<div className={style.error}>
|
|
8
|
+
<h1>Application Error</h1>
|
|
9
|
+
<pre>{error.stack}</pre>
|
|
10
|
+
</div>
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"spinner":"${underscore_name}_Spinner_spinner","active":"${underscore_name}_Spinner_active","spin":"${underscore_name}_Spinner_spin"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import './Spinner.scss';
|
|
2
2
|
import * as style from './Spinner.scss.json';
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
export function Spinner({active = true}) {
|
|
4
5
|
return (
|
|
5
6
|
<div
|
|
6
7
|
className={[style.spinner, active && style.active].join(' ')}
|
|
@@ -8,4 +9,4 @@ export default function Spinner({active = true}) {
|
|
|
8
9
|
aria-busy={active ? 'true' : 'false'}
|
|
9
10
|
/>
|
|
10
11
|
);
|
|
11
|
-
}
|
|
12
|
+
}
|
|
@@ -1,27 +1,32 @@
|
|
|
1
1
|
import {initFrontend} from 'lincd-server-utils/lib/utils/Frontend';
|
|
2
|
-
|
|
3
|
-
window['$RefreshReg$'] = () => {};
|
|
4
|
-
window['$RefreshSig$'] = () => () => {};
|
|
5
|
-
|
|
6
2
|
import {hydrateRoot} from 'react-dom/client';
|
|
7
3
|
import {BrowserRouter} from 'react-router-dom';
|
|
8
4
|
import App from './App';
|
|
9
5
|
import React from 'react';
|
|
10
6
|
import {Storage} from 'lincd/lib/utils/Storage';
|
|
11
|
-
import {
|
|
7
|
+
import {BackendAPIStore} from 'lincd-server/lib/shapes/BackendAPIStore';
|
|
8
|
+
import {AppContextProvider} from 'lincd-server-utils/lib/components/AppContext';
|
|
12
9
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
Storage.setDefaultStore(store);
|
|
10
|
+
window['$RefreshReg$'] = () => {};
|
|
11
|
+
window['$RefreshSig$'] = () => () => {};
|
|
16
12
|
|
|
13
|
+
//forward all storage requests to the backend
|
|
14
|
+
export const store = new BackendAPIStore();
|
|
15
|
+
Storage.setDefaultStore(store);
|
|
17
16
|
|
|
18
17
|
initFrontend().then(() => {
|
|
19
18
|
hydrateRoot(
|
|
20
19
|
document,
|
|
21
20
|
<React.StrictMode>
|
|
22
21
|
<BrowserRouter>
|
|
23
|
-
<
|
|
22
|
+
<AppContextProvider
|
|
23
|
+
assets={window['assetManifest']}
|
|
24
|
+
requestLD={document.getElementById('request-ld')?.innerText}
|
|
25
|
+
requestObject={document.getElementById('request-json')?.innerText}
|
|
26
|
+
>
|
|
27
|
+
<App />
|
|
28
|
+
</AppContextProvider>
|
|
24
29
|
</BrowserRouter>
|
|
25
30
|
</React.StrictMode>,
|
|
26
31
|
);
|
|
27
|
-
});
|
|
32
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"main":"${underscore_name}_DefaultLayout_main"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {Header} from './Header';
|
|
3
|
+
import './DefaultLayout.scss';
|
|
4
|
+
import style from './DefaultLayout.scss.json';
|
|
5
|
+
|
|
6
|
+
export function DefaultLayout({children}) {
|
|
7
|
+
return (
|
|
8
|
+
<main className={style.main}>
|
|
9
|
+
<Header />
|
|
10
|
+
{children}
|
|
11
|
+
</main>
|
|
12
|
+
);
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"header":"${underscore_name}_Header_header","menu":"${underscore_name}_Header_menu"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import {Link} from 'react-router-dom';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import style from './Header.scss.json';
|
|
4
|
+
import './Header.scss';
|
|
5
|
+
|
|
6
|
+
export function Header() {
|
|
7
|
+
return (
|
|
8
|
+
<header className={style.header}>
|
|
9
|
+
<h1>${name}</h1>
|
|
10
|
+
<nav className={style.menu}>
|
|
11
|
+
<Link to="/">Home</Link>
|
|
12
|
+
<Link to="/page1">Page 1</Link>
|
|
13
|
+
</nav>
|
|
14
|
+
</header>
|
|
15
|
+
);
|
|
16
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import {linkedPackage} from 'lincd/lib/utils/Module';
|
|
2
|
+
|
|
3
|
+
export const {
|
|
4
|
+
linkedComponent,
|
|
5
|
+
linkedSetComponent,
|
|
6
|
+
linkedComponentClass,
|
|
7
|
+
linkedShape,
|
|
8
|
+
linkedUtil,
|
|
9
|
+
linkedOntology,
|
|
10
|
+
registerPackageExport,
|
|
11
|
+
registerPackageModule,
|
|
12
|
+
packageExports,
|
|
13
|
+
packageName,
|
|
14
|
+
} = linkedPackage('${hyphen_name}');
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"Home":"${underscore_name}_Home_Home"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
+
import './Home.scss';
|
|
3
|
+
import style from './Home.scss.json';
|
|
4
|
+
|
|
5
|
+
export default function Home() {
|
|
6
|
+
return (
|
|
7
|
+
<DefaultLayout>
|
|
8
|
+
<div className={style.Home}>
|
|
9
|
+
<h2>Get started</h2>
|
|
10
|
+
<p>
|
|
11
|
+
Your LINCD App is ready to go!
|
|
12
|
+
<br />
|
|
13
|
+
To edit this file, open:
|
|
14
|
+
</p>
|
|
15
|
+
<code>
|
|
16
|
+
<pre>/src/pages/Home.tsx</pre>
|
|
17
|
+
</code>
|
|
18
|
+
</div>
|
|
19
|
+
</DefaultLayout>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React,{lazy,Suspense} from 'react';
|
|
2
|
+
import {Route,Routes} from 'react-router-dom';
|
|
3
|
+
import {Spinner} from './components/Spinner';
|
|
4
|
+
|
|
5
|
+
//In React 18 you can use 'lazy' to import pages only when you need them.
|
|
6
|
+
//This will cause webpack to create multiple bundles, and the right bundles are automatically loaded
|
|
7
|
+
|
|
8
|
+
export const ROUTES = {
|
|
9
|
+
index: {
|
|
10
|
+
path: '/',
|
|
11
|
+
component: lazy(() => import('./pages/Home' /* webpackPrefetch: true */)),
|
|
12
|
+
requireAuth: true,
|
|
13
|
+
},
|
|
14
|
+
page1: {
|
|
15
|
+
path: '/page1',
|
|
16
|
+
component: lazy(() => import('./pages/Page1' /* webpackPrefetch: true */)),
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export default function AppRoutes() {
|
|
21
|
+
return (
|
|
22
|
+
<Routes>
|
|
23
|
+
{Object.keys(ROUTES).map((routeName) => {
|
|
24
|
+
let route = ROUTES[routeName];
|
|
25
|
+
let Component = route.component;
|
|
26
|
+
return (
|
|
27
|
+
<Route
|
|
28
|
+
key={route.path}
|
|
29
|
+
path={route.path}
|
|
30
|
+
element={
|
|
31
|
+
<Suspense fallback={<Spinner />}>
|
|
32
|
+
<Component />
|
|
33
|
+
</Suspense>
|
|
34
|
+
}
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
})}
|
|
38
|
+
</Routes>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
This file allows you to overwrite specific css classes.
|
|
3
|
+
It is configured in such a way that the classes will not be converted to css modules, like the other .scss files.
|
|
4
|
+
If you need to target specific classes of your app that you have defined yourself, you'll need to use the converted class name from the .scss.json file
|
|
5
|
+
|
|
6
|
+
Example: lets say Matches.tsx renders a Material UI component that uses a class "MuiBox-root"
|
|
7
|
+
It also imports Matches.scss, which has a class .matchesContainer
|
|
8
|
+
If you check the Matches.scss.json file, you'll see that the class name has been converted to .appname_Matches_matchesContainer
|
|
9
|
+
So to overwrite styles of "MuiBox-root" you would use:
|
|
10
|
+
.appname_Matches_matchesContainer .MuiBox-root {
|
|
11
|
+
*/
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
$primaryColor: #b872da;
|
|
2
|
+
$primaryColorDark: #8e39b8;
|
|
3
|
+
$secondaryColor: #4ddad7;
|
|
4
|
+
$textColorGrey: #5f6d7e;
|
|
5
|
+
$textColor: #141414;
|
|
6
|
+
$textColorSmall: #6d6d6d;
|
|
7
|
+
$borderRadius: 8px;
|
|
8
|
+
$gray200: #e5e5e5;
|
|
9
|
+
$gray50: #f3f3f3;
|
|
10
|
+
$boxPadding: 8px;
|
|
11
|
+
$errorColor: #ff0000;
|
|
12
|
+
$warningColor: #ffa500;
|
|
13
|
+
$infoColor: #0000ff;
|
|
14
|
+
$successColor: #008000;
|
|
15
|
+
$backgroundColor: #ffffff;
|
|
16
|
+
$grayColor: #cccccc;
|
|
17
|
+
|
|
18
|
+
// breakpoints
|
|
19
|
+
$breakpoint-xs: 320px;
|
|
20
|
+
$breakpoint-sm: 640px;
|
|
21
|
+
$breakpoint-md: 768px;
|
|
22
|
+
$breakpoint-lg: 1024px;
|
|
23
|
+
$breakpoint-xl: 1300px;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/lib/cli-methods.js
CHANGED
|
@@ -130,19 +130,24 @@ var createApp = function (name, basePath) {
|
|
|
130
130
|
fs_extra_1["default"].mkdirSync(targetFolder);
|
|
131
131
|
}
|
|
132
132
|
fs_extra_1["default"].copySync(path_1["default"].join(__dirname, '..', 'defaults', 'app-with-backend'), targetFolder);
|
|
133
|
+
//make sure the data folder exists (even though its empty).. copying empty folders does not work with fs.copySync
|
|
134
|
+
fs_extra_1["default"].mkdirSync(path_1["default"].join(targetFolder, 'data'), { recursive: true });
|
|
133
135
|
// fs.renameSync(path.join(targetFolder, '.yarnrc.yml.template'), path.join(targetFolder, '.yarnrc.yml'));
|
|
134
136
|
// fs.copySync(path.join(__dirname, '..', 'defaults', 'app'), targetFolder);
|
|
135
137
|
log("Creating new LINCD application '" + name + "'");
|
|
136
138
|
//replace variables in some copied files
|
|
137
|
-
|
|
138
|
-
return [4 /*yield*/, hasYarnInstalled()];
|
|
139
|
+
return [4 /*yield*/, replaceVariablesInFolder(targetFolder)];
|
|
139
140
|
case 1:
|
|
141
|
+
//replace variables in some copied files
|
|
142
|
+
_b.sent();
|
|
143
|
+
return [4 /*yield*/, hasYarnInstalled()];
|
|
144
|
+
case 2:
|
|
140
145
|
hasYarn = _b.sent();
|
|
141
146
|
installCommand = hasYarn ? 'yarn install' : 'npm install';
|
|
142
147
|
return [4 /*yield*/, (0, utils_1.execp)("cd ".concat(hyphenName, " && ").concat(installCommand), true)["catch"](function (err) {
|
|
143
148
|
console.warn('Could not install dependencies or start application');
|
|
144
149
|
})];
|
|
145
|
-
case
|
|
150
|
+
case 3:
|
|
146
151
|
_b.sent();
|
|
147
152
|
log("Your LINCD App is ready at ".concat(chalk_1["default"].blueBright(targetFolder)), "To start, run\n".concat(chalk_1["default"].blueBright("cd ".concat(hyphenName)), " and then ").concat(chalk_1["default"].blueBright((hasYarn ? 'yarn' : 'npm') + ' start')));
|
|
148
153
|
return [2 /*return*/];
|
|
@@ -152,7 +157,7 @@ var createApp = function (name, basePath) {
|
|
|
152
157
|
};
|
|
153
158
|
exports.createApp = createApp;
|
|
154
159
|
function logHelp() {
|
|
155
|
-
(0, utils_1.execp)('yarn lincd help');
|
|
160
|
+
(0, utils_1.execp)('yarn exec lincd help');
|
|
156
161
|
}
|
|
157
162
|
function log() {
|
|
158
163
|
var messages = [];
|
|
@@ -450,7 +455,7 @@ function buildAll(target, target2, target3) {
|
|
|
450
455
|
}
|
|
451
456
|
//unless told otherwise, build the package
|
|
452
457
|
if (!command) {
|
|
453
|
-
command = (0, utils_1.execPromise)('cd ' + pkg.path + ' && yarn lincd build' + (target ? ' ' + target : '') + (target2 ? ' ' + target2 : ''), false, false, {}, false);
|
|
458
|
+
command = (0, utils_1.execPromise)('cd ' + pkg.path + ' && yarn exec lincd build' + (target ? ' ' + target : '') + (target2 ? ' ' + target2 : ''), false, false, {}, false);
|
|
454
459
|
debugInfo(chalk_1["default"].cyan('Building ' + pkg.packageName));
|
|
455
460
|
}
|
|
456
461
|
return [2 /*return*/, command["catch"](function (_a) {
|
|
@@ -591,7 +596,9 @@ var replaceVariablesInFile = function (filePath) { return __awaiter(void 0, void
|
|
|
591
596
|
var fileContent, newContent;
|
|
592
597
|
return __generator(this, function (_a) {
|
|
593
598
|
switch (_a.label) {
|
|
594
|
-
case 0: return [4 /*yield*/, fs_extra_1["default"].readFile(filePath, 'utf8')]
|
|
599
|
+
case 0: return [4 /*yield*/, fs_extra_1["default"].readFile(filePath, 'utf8')["catch"](function (err) {
|
|
600
|
+
console.warn(chalk_1["default"].red("Could not read file " + filePath));
|
|
601
|
+
})];
|
|
595
602
|
case 1:
|
|
596
603
|
fileContent = _a.sent();
|
|
597
604
|
newContent = replaceCurlyVariables(fileContent);
|
|
@@ -692,6 +699,20 @@ var replaceVariablesInFiles = function () {
|
|
|
692
699
|
return replaceVariablesInFile(file);
|
|
693
700
|
}));
|
|
694
701
|
};
|
|
702
|
+
var replaceVariablesInFolder = function (folder) {
|
|
703
|
+
//get all files in folder, including files that start with a dot
|
|
704
|
+
glob(folder + '/**/*', { dot: true, nodir: true }, function (err, files) {
|
|
705
|
+
if (err) {
|
|
706
|
+
console.log('Error', err);
|
|
707
|
+
}
|
|
708
|
+
else {
|
|
709
|
+
// console.log(files);
|
|
710
|
+
return Promise.all(files.map(function (file) {
|
|
711
|
+
return replaceVariablesInFile(file);
|
|
712
|
+
}));
|
|
713
|
+
}
|
|
714
|
+
});
|
|
715
|
+
};
|
|
695
716
|
var replaceVariablesInFilesWithRoot = function (root) {
|
|
696
717
|
var files = [];
|
|
697
718
|
for (var _i = 1; _i < arguments.length; _i++) {
|
|
@@ -745,12 +766,14 @@ var setNameVariables = function (name) {
|
|
|
745
766
|
var hyphenName = name.replace(/[-_\s]+/g, '-');
|
|
746
767
|
var camelCaseName = camelCase(name); //some-package --> someModule
|
|
747
768
|
var underscoreName = name.replace(/[-\s]+/g, '_');
|
|
769
|
+
var plainName = name.replace(/[-\s]+/g, '');
|
|
748
770
|
//longer similar variables names should come before the shorter ones
|
|
749
771
|
setVariable('underscore_name', underscoreName);
|
|
750
772
|
setVariable('hyphen_name', hyphenName);
|
|
751
773
|
setVariable('camel_name', camelCaseName);
|
|
752
774
|
setVariable('name', name);
|
|
753
|
-
|
|
775
|
+
setVariable('plain_name', plainName);
|
|
776
|
+
return { hyphenName: hyphenName, camelCaseName: camelCaseName, underscoreName: underscoreName, plainName: plainName };
|
|
754
777
|
};
|
|
755
778
|
function getSourceFolder(basePath) {
|
|
756
779
|
if (basePath === void 0) { basePath = process.cwd(); }
|
|
@@ -1077,6 +1100,10 @@ var buildMetadata = function () { return __awaiter(void 0, void 0, void 0, funct
|
|
|
1077
1100
|
errors = true;
|
|
1078
1101
|
return [3 /*break*/, 3];
|
|
1079
1102
|
case 1:
|
|
1103
|
+
if (!response.packageUri) {
|
|
1104
|
+
console.warn("No package URI from meta data. Not building meta data for this package");
|
|
1105
|
+
return [2 /*return*/];
|
|
1106
|
+
}
|
|
1080
1107
|
pkgNode = models_1.NamedNode.getOrCreate(response.packageUri);
|
|
1081
1108
|
lincdApp = (0, NameSpace_1.createNameSpace)('http://lincd.org/ont/lincd-app/');
|
|
1082
1109
|
Prefix_1.Prefix.add('lincdApp', 'http://lincd.org/ont/lincd-app/');
|
|
@@ -1663,8 +1690,8 @@ var executeCommandForPackage = function (packageName, command) {
|
|
|
1663
1690
|
return modDetails.packageName.indexOf(packageName) !== -1 || modDetails.packageName.indexOf(packageName) !== -1;
|
|
1664
1691
|
});
|
|
1665
1692
|
if (packageDetails) {
|
|
1666
|
-
log("Executing 'cd " + packageDetails.path + ' && yarn lincd' + (command ? ' ' + command : '') + "'");
|
|
1667
|
-
return (0, utils_1.execp)('cd ' + packageDetails.path + ' && yarn lincd' + (command ? ' ' + command : ''));
|
|
1693
|
+
log("Executing 'cd " + packageDetails.path + ' && yarn exec lincd' + (command ? ' ' + command : '') + "'");
|
|
1694
|
+
return (0, utils_1.execp)('cd ' + packageDetails.path + ' && yarn exec lincd' + (command ? ' ' + command : ''));
|
|
1668
1695
|
}
|
|
1669
1696
|
else {
|
|
1670
1697
|
warn("Could not find a pkg who's name (partially) matched " + chalk_1["default"].cyan(packageName));
|
package/package.json
CHANGED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
require('@babel/register')({extensions: ['.ts', '.tsx']});
|
|
3
|
-
const LincdServer = require('lincd-server/lib/shapes/LincdServer');
|
|
4
|
-
let lincdConfig = require("../lincd.config");
|
|
5
|
-
let server = new LincdServer.LincdServer({loadAppComponent: () => require('../frontend/src/App').default,...lincdConfig});
|
|
6
|
-
server.start();
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
.error {
|
|
2
|
-
color: white;
|
|
3
|
-
margin: 2rem;
|
|
4
|
-
|
|
5
|
-
pre {
|
|
6
|
-
white-space: pre-wrap;
|
|
7
|
-
padding: 1rem;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.content {
|
|
12
|
-
display: block;
|
|
13
|
-
margin: 1rem 0;
|
|
14
|
-
|
|
15
|
-
code {
|
|
16
|
-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
17
|
-
margin: 0.5rem 0;
|
|
18
|
-
|
|
19
|
-
pre {
|
|
20
|
-
padding: 1rem;
|
|
21
|
-
background-color: #bfe7fc;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.main {
|
|
27
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
|
|
28
|
-
'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
29
|
-
width: 66.6%;
|
|
30
|
-
margin: auto;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.header {
|
|
34
|
-
display: block;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.menu {
|
|
38
|
-
margin: 1rem 0;
|
|
39
|
-
display: grid;
|
|
40
|
-
grid-template-columns: repeat(6, 1fr);
|
|
41
|
-
grid-gap: 1rem;
|
|
42
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"error":"${name}_App_error","content":"${name}_App_content","main":"${name}_App_main","header":"${name}_App_header","menu":"${name}_App_menu"}
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
import {Link} from 'react-router-dom';
|
|
2
|
-
import React,{lazy, Suspense} from 'react';
|
|
3
|
-
import {ErrorBoundary} from 'react-error-boundary';
|
|
4
|
-
import Spinner from './components/Spinner';
|
|
5
|
-
import {Route, Routes} from 'react-router-dom';
|
|
6
|
-
|
|
7
|
-
//Note that by default LINCD apps are set up with support for SCSS (sass) and CSS Modules
|
|
8
|
-
//So any .scss file needs to be imported by itself
|
|
9
|
-
import './App.scss';
|
|
10
|
-
//and then the .scss.json file needs to be imported to access the class names (this file will be automatically generated)
|
|
11
|
-
import style from './App.scss.json';
|
|
12
|
-
|
|
13
|
-
//In React 18 you can use 'lazy' to import pages only when you need them.
|
|
14
|
-
//This will cause webpack to create multiple bundles, and the right one is automatically loaded
|
|
15
|
-
const Home = lazy(() => import('./pages/Home' /* webpackPrefetch: true */));
|
|
16
|
-
const Page1 = lazy(() => import('./pages/Page1' /* webpackPrefetch: true */));
|
|
17
|
-
|
|
18
|
-
declare var window;
|
|
19
|
-
export default function App({
|
|
20
|
-
assets = typeof window !== 'undefined' ? window['assetManifest'] : {},
|
|
21
|
-
//on the frontend data will not be set yet, but it will be present in the initial HTML as a script tag with JSON-LD inside, with the ID: request-ld
|
|
22
|
-
//so here we read that back to the data variable, so that the rendering (of that same <script> tag) will be identical as the backend
|
|
23
|
-
requestLD = typeof document !== 'undefined' ? document.getElementById('request-ld')?.innerText : null,
|
|
24
|
-
requestObject = typeof document !== 'undefined' ? document.getElementById('request-json')?.innerText : null,
|
|
25
|
-
}) {
|
|
26
|
-
return (
|
|
27
|
-
<Html assets={assets} requestObject={requestObject} requestLD={requestLD} title="${name} - LINCD App">
|
|
28
|
-
<Suspense fallback={<Spinner />}>
|
|
29
|
-
<ErrorBoundary FallbackComponent={Error}>
|
|
30
|
-
<Content />
|
|
31
|
-
</ErrorBoundary>
|
|
32
|
-
</Suspense>
|
|
33
|
-
</Html>
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function Content() {
|
|
38
|
-
return (
|
|
39
|
-
<Layout>
|
|
40
|
-
<div className={style.content}>
|
|
41
|
-
<Routes>
|
|
42
|
-
<Route
|
|
43
|
-
path="/"
|
|
44
|
-
element={
|
|
45
|
-
<Suspense fallback={<Spinner />}>
|
|
46
|
-
<Home />
|
|
47
|
-
</Suspense>
|
|
48
|
-
}
|
|
49
|
-
/>
|
|
50
|
-
<Route
|
|
51
|
-
path="/page1"
|
|
52
|
-
element={
|
|
53
|
-
<Suspense fallback={<Spinner />}>
|
|
54
|
-
<Page1 />
|
|
55
|
-
</Suspense>
|
|
56
|
-
}
|
|
57
|
-
/>
|
|
58
|
-
</Routes>
|
|
59
|
-
</div>
|
|
60
|
-
</Layout>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
function Error({error}) {
|
|
65
|
-
return (
|
|
66
|
-
<div className={style.error}>
|
|
67
|
-
<h1>Application Error</h1>
|
|
68
|
-
<pre>{error.stack}</pre>
|
|
69
|
-
</div>
|
|
70
|
-
);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
function Layout({children}) {
|
|
74
|
-
return (
|
|
75
|
-
<main className={style.main}>
|
|
76
|
-
<Header />
|
|
77
|
-
{children}
|
|
78
|
-
</main>
|
|
79
|
-
);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function Header() {
|
|
83
|
-
return (
|
|
84
|
-
<header className={style.header}>
|
|
85
|
-
<h1>${name}</h1>
|
|
86
|
-
<nav className={style.menu}>
|
|
87
|
-
<Link to="/">Home</Link>
|
|
88
|
-
<Link to="/page1">Page 1</Link>
|
|
89
|
-
</nav>
|
|
90
|
-
</header>
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function Html({assets,requestObject,requestLD,children,title}) {
|
|
95
|
-
return (
|
|
96
|
-
<html lang="en">
|
|
97
|
-
{globalThis.document?.head ? (
|
|
98
|
-
<head dangerouslySetInnerHTML={{__html: document.head.innerHTML}} />
|
|
99
|
-
) : (
|
|
100
|
-
<head>
|
|
101
|
-
<title>{title}</title>
|
|
102
|
-
|
|
103
|
-
<meta charSet="utf-8" />
|
|
104
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
105
|
-
|
|
106
|
-
<link rel="shortcut icon" href="/static/favicon.ico" />
|
|
107
|
-
<link rel="stylesheet" href={assets['main.css']} />
|
|
108
|
-
|
|
109
|
-
{assets['tailwind-cdn'] && <script src={assets['tailwind-cdn']}></script>}
|
|
110
|
-
<script id='request-ld' type='application/ld+json' dangerouslySetInnerHTML={{__html: requestLD}} />
|
|
111
|
-
<script id='request-json' type='application/json' dangerouslySetInnerHTML={{__html: requestObject}} />
|
|
112
|
-
|
|
113
|
-
</head>
|
|
114
|
-
)}
|
|
115
|
-
<body>
|
|
116
|
-
<noscript
|
|
117
|
-
dangerouslySetInnerHTML={{
|
|
118
|
-
__html: `<b>Enable JavaScript to run this app.</b>`,
|
|
119
|
-
}}
|
|
120
|
-
/>
|
|
121
|
-
{children}
|
|
122
|
-
<script
|
|
123
|
-
dangerouslySetInnerHTML={{
|
|
124
|
-
__html: `assetManifest = ${JSON.stringify(assets)};`,
|
|
125
|
-
}}
|
|
126
|
-
/>
|
|
127
|
-
</body>
|
|
128
|
-
</html>
|
|
129
|
-
);
|
|
130
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"spinner":"${name}_Spinner_spinner","active":"${name}_Spinner_active","spin":"${name}_Spinner_spin"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import {linkedPackage} from 'lincd/lib/utils/Module';
|
|
2
|
-
export const {linkedComponent, linkedSetComponent, linkedComponentClass, linkedShape, linkedUtil, linkedOntology, registerPackageExport, registerPackageModule, packageExports, packageName} =
|
|
3
|
-
linkedPackage('${hyphen_name}');
|
|
File without changes
|