lincd-cli 1.1.11 → 1.2.1

package/defaults/app-static/.env-cmdrc.json

@@ -0,0 +1,17 @@
+{
+  "app-main": {
+    "APP_ID": "com.yourdomain.www",
+    "APP_ENV": true,
+    "OUTPUT_PATH": "./web/assets",
+    "ASSET_PATH": "./assets/",
+    "ENTRY_PATH": "./src/index-static.tsx"
+  },
+  "app-local-android": {
+    "NODE_ENV": "app",
+    "SITE_ROOT": "http://10.0.2.2:4000"
+  },
+  "app-local-ios": {
+    "NODE_ENV": "app",
+    "SITE_ROOT": "http://localhost:4000"
+  }
+}

package/defaults/app-static/package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "app": "env-cmd -e _main,production,app-main node scripts/build.js && npx cap sync",
+    "app-local-ios": "env-cmd -e _main,development,app-main,app-local-ios node scripts/build.js && npx cap sync",
+    "app-local-android": "env-cmd -e _main,development,app-main,app-local-android node scripts/build.js && npx cap sync",
+    "app-staging": "env-cmd -e _main,staging,app-main,app-staging node scripts/build.js && npx cap sync"
+  }
+}

package/defaults/app-static/src/index-static.tsx

@@ -8,7 +8,7 @@ import {AppContextProvider} from 'lincd-server-utils/lib/components/AppContext';
 import './config-frontend';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 
 root.render(
@@ -18,5 +18,5 @@ root.render(
         <App />
       </AppContextProvider>
     </BrowserRouter>
-  </React.StrictMode>
-);
+  </React.StrictMode>,
+);

package/defaults/app-with-backend/.env-cmdrc.json

@@ -9,11 +9,8 @@
     "NODE_ENV": "development",
     "SITE_ROOT": "http://localhost:4000"
   },
-  "staging": {
-    "NODE_ENV": "staging",
-    "SITE_ROOT": "https://next.${hyphen_name}.com"
-  },
   "production": {
+    "PORT": "4000",
     "NODE_ENV": "production",
     "SITE_ROOT": "https://app.${hyphen_name}.com"
   }

package/defaults/app-with-backend/.eslintignore

@@ -1,3 +1,5 @@
 node_modules
 public
-build
+build
+data
+web

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

@@ -1,7 +1,5 @@
 module.exports = {
-  cssMode: 'scss-modules',
+  cssMode: 'mixed',
   cacheWebpack:true,
-  cssGlobalModulePaths:[/global-overwrites.scss/],
   analyse:false,
-
 };

package/defaults/app-with-backend/package.json

@@ -16,13 +16,12 @@
   "main": "scripts/start-server.js",
   "license": "MIT",
   "scripts": {
-    "start": "npm run server:dev",
-    "server:prod": "yarn lincd start --env production",
+    "start": "node --import ./node_modules/lincd-cli/lib/esm/loaders/register.js node_modules/.bin/lincd-cli start --env development",
     "build": "yarn lincd build-app --env production",
-    "build:production": "yarn lincd build-app --env production",
-    "postinstall": "husky install",
+    "prepare": "husky",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
+    "server:prod": "yarn lincd start --env production",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "yarn lint --fix",
     "prettier": "prettier \"src/**/*.{js,jsx,ts,tsx,css,scss}\" --check",
@@ -37,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "workspaces" : [
+  "workspaces": [
     "packages/*"
   ],
   "keywords": [
@@ -50,27 +49,17 @@
     "web3"
   ],
   "dependencies": {
-    "@babel/cli": "^7.22.9",
-    "@babel/core": "^7.22.9",
-    "@babel/plugin-proposal-decorators": "^7.22.7",
-    "@babel/plugin-transform-runtime": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@babel/register": "^7.22.5",
-    "chalk": "^4.1.2",
-    "lincd": "^0.6",
-    "lincd-auth": "^0.1.19",
-    "lincd-jsonld": "^0.1.21",
-    "lincd-server": "^0.1.39",
-    "lincd-server-utils": "^0.1.7",
+    "lincd": "~1.0",
+    "lincd-auth": "~1.0",
+    "lincd-server": "~1.0",
+    "lincd-server-utils": "~1.0",
     "react": "^18.2",
     "react-dom": "^18.2",
     "react-error-boundary": "^3.1.3",
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.10",
+    "@types/node": "^20.12.7",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "latest",
@@ -83,10 +72,11 @@
     "eslint-plugin-react": "latest",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.0",
-    "lincd-cli": "~1.1",
+    "lincd-cli": "^1.1",
     "nodemon": "^2.0.22",
     "pinst": "^3.0.0",
     "pm2": "^5.3.0",
+    "typescript-plugin-css-modules": "^5.1.0",
     "which": "^3.0.1"
   },
   "packageManager": "yarn@3.6.1"

package/defaults/app-with-backend/scripts/storage-config.js

@@ -1,11 +1,11 @@
-const { Storage } = require('lincd/lib/utils/Storage');
-const { LocalFileStore } = require('lincd-server/lib/shapes/filestores/LocalFileStore');
-const { LinkedFileStorage } = require('lincd/lib/utils/LinkedFileStorage');
-const { N3FileStore } = require('lincd-server/lib/shapes/quadstores/N3FileStore');
+import { LinkedStorage } from 'lincd/utils/LinkedStorage';
+import { LinkedFileStorage } from 'lincd/utils/LinkedFileStorage';
+import { LocalFileStore } from 'lincd-server/shapes/filestores/LocalFileStore';
+import { N3FileStore } from 'lincd-server/shapes/quadstores/N3FileStore';
 
 //How quads are stored
-let fileStore = new N3FileStore(process.env.NODE_ENV + '-main');
-Storage.setDefaultStore(fileStore);
+let quadStore = new N3FileStore(process.env.NODE_ENV + '-main');
+LinkedStorage.setDefaultStore(quadStore);
 
 //How files are stored
 let fileStore = new LocalFileStore(process.env.NODE_ENV + '-main');

package/defaults/app-with-backend/src/App.module.css

@@ -0,0 +1,17 @@
+.App {
+  display: block;
+  color: #141414;
+  margin-top: 1.5rem;
+}
+body {
+  font-family: 'Roboto', sans-serif;
+  background-color: #ffffff;
+}
+h1 {
+  font-size: 2rem;
+  font-weight: 100;
+}
+h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+}

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

@@ -1,18 +1,14 @@
-import React, {Suspense} from 'react';
-import {ErrorBoundary} from 'react-error-boundary';
-import {Spinner} from './components/Spinner';
-import {Error} from './components/Error';
-import {AppRoot} from 'lincd-server-utils/lib/components/AppRoot';
-import {Head} from 'lincd-server-utils/lib/components/Head';
-import {Body} from 'lincd-server-utils/lib/components/Body';
-import AppRoutes, {ROUTES} from './routes';
-import {ProvideAuth} from 'lincd-auth/lib/hooks/useAuth';
-
-//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';
+import './theme.css'; //needs to be the first import before importing other components
+import React, { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Spinner } from './components/Spinner';
+import { Error } from './components/Error';
+import { AppRoot } from 'lincd-server-utils/components/AppRoot';
+import { Head } from 'lincd-server-utils/components/Head';
+import { Body } from 'lincd-server-utils/components/Body';
+import AppRoutes, { ROUTES } from './routes';
+import { ProvideAuth } from 'lincd-auth/hooks/useAuth';
+import style from './App.module.css'; //import any .module.css file like this and access the classnames from the style object
 
 export default function App() {
   return (

package/defaults/app-with-backend/src/backend.ts

@@ -1 +1,9 @@
 //import all ShapeProviders here or define a generic BackendProvider, see documentation on https://docs.lincd.org
+
+import { BackendProvider } from 'lincd-server-utils/utils/BackendProvider';
+
+export class Backend extends BackendProvider {
+  constructor(server) {
+    super(server);
+  }
+}

package/defaults/app-with-backend/src/components/Error.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import style from './Error.scss.json';
-import './Error.scss';
+import style from './Error.module.css';
 
-export function Error({error}) {
+export function Error({ error }) {
   return (
     <div className={style.error}>
       <h1>Application Error</h1>
@@ -10,5 +9,3 @@ export function Error({error}) {
     </div>
   );
 }
-
-

package/defaults/app-with-backend/src/components/Spinner.tsx

@@ -1,7 +1,7 @@
-import './Spinner.scss';
-import * as style from './Spinner.scss.json';
+import React from 'react';
+import style from './Spinner.module.css';
 
-export function Spinner({active = true}) {
+export function Spinner({ active = true }) {
   return (
     <div
       className={[style.spinner, active && style.active].join(' ')}

package/defaults/app-with-backend/src/config-frontend.ts

@@ -1,7 +1,7 @@
-import { LinkedFileStorage } from 'lincd/lib/utils/LinkedFileStorage';
-import { getAccessUrlLocalFileStore } from 'lincd-server/lib/utils/accessUrl';
-import { BackendAPIStore } from 'lincd-server/lib/shapes/quadstores/BackendAPIStore';
-import { LinkedStorage } from 'lincd/lib/utils/LinkedStorage';
+import { LinkedFileStorage } from 'lincd/utils/LinkedFileStorage';
+import { getAccessUrlLocalFileStore } from 'lincd-server/utils/accessUrl';
+import { BackendAPIStore } from 'lincd-server/shapes/quadstores/BackendAPIStore';
+import { LinkedStorage } from 'lincd/utils/LinkedStorage';
 
 // store all quads in a file on the backend named 'main'
 // export const store = new BackendFileStore('main');
@@ -10,8 +10,8 @@ LinkedStorage.setDefaultStore(store);
 
 // determine where assets at loaded from
 // if (process.env.NODE_ENV === 'development') {
-  //by default assets are loaded from the file system of the node.js backend server
-  LinkedFileStorage.setDefaultAccessURL(getAccessUrlLocalFileStore());
+//by default assets are loaded from the file system of the node.js backend server
+LinkedFileStorage.setDefaultAccessURL(getAccessUrlLocalFileStore());
 // } else {
 //   LinkedFileStorage.setDefaultAccessURL(getAccessURLS3FileStore());
 // }

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

@@ -8,6 +8,7 @@ import { AppContextProvider } from 'lincd-server-utils/lib/components/AppContext
 //import the storage & file configuration for the frontend
 import './config-frontend';
 
+//to avoid errors with react-refresh-webpack-plugin
 window['$RefreshReg$'] = () => {};
 window['$RefreshSig$'] = () => () => {};
 

package/defaults/app-with-backend/src/layout/DefaultLayout.module.css

@@ -0,0 +1,12 @@
+.main {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  margin: auto;
+  width: min(66.6%, 1000px);
+  @media (max-width: 1024px) {
+    width: 80%;
+  }
+  @media (max-width: 768px) {
+    width: 90%;
+  }
+}

package/defaults/app-with-backend/src/layout/DefaultLayout.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import {Header} from './Header';
-import './DefaultLayout.scss';
-import style from './DefaultLayout.scss.json';
+import { Header } from './Header';
+import style from './DefaultLayout.module.css';
 
-export function DefaultLayout({children}) {
+export function DefaultLayout({ children }) {
   return (
     <main className={style.main}>
       <Header />

package/defaults/app-with-backend/src/layout/Header.module.css

@@ -0,0 +1,25 @@
+.header {
+  display: block;
+}
+
+.menu {
+  margin: 1rem 0 3rem;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 1rem;
+  > a {
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.2rem;
+    background: black;
+    color: white;
+    padding: 5px 10px;
+    text-decoration: none;
+    &.active {
+      background: white;
+      color: black;
+      box-shadow: 1px 8px 10px #888;
+      border: 1px solid #444;
+    }
+  }
+}

package/defaults/app-with-backend/src/layout/Header.tsx

@@ -1,18 +1,22 @@
-import {Link} from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import React from 'react';
-import style from './Header.scss.json';
-import './Header.scss';
-import {ROUTES} from '../routes';
+import style from './Header.module.css';
+import { ROUTES } from '../routes';
 
 export function Header() {
+  let path = useLocation();
   return (
     <header className={style.header}>
-      <h1>${name}</h1>
+      <h1>LINCD 1.0 Demo App</h1>
       <nav className={style.menu}>
         {Object.keys(ROUTES).map((key) => {
           if (ROUTES[key].excludeFromMenu) return null;
           return (
-            <Link key={key} to={ROUTES[key].path}>
+            <Link
+              key={key}
+              to={ROUTES[key].path}
+              className={ROUTES[key].path === path.pathname ? style.active : ''}
+            >
               {ROUTES[key].label || key}
             </Link>
           );

package/defaults/app-with-backend/src/package.ts

@@ -1,14 +1,12 @@
-import {linkedPackage} from 'lincd/lib/utils/Module';
+import { linkedPackage } from 'lincd/utils/Package';
 
 export const {
   linkedComponent,
   linkedSetComponent,
-  linkedComponentClass,
   linkedShape,
   linkedUtil,
   linkedOntology,
   registerPackageExport,
-  registerPackageModule,
   packageExports,
   packageName,
 } = linkedPackage('${hyphen_name}');

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

@@ -1,6 +1,5 @@
-import {DefaultLayout} from '../layout/DefaultLayout';
-import './Home.scss';
-import style from './Home.scss.json';
+import { DefaultLayout } from '../layout/DefaultLayout';
+import style from './Home.module.css';
 
 export default function Home() {
   return (

package/defaults/app-with-backend/src/routes.tsx

@@ -1,10 +1,10 @@
-import React, {lazy, Suspense} from 'react';
-import {Route, Routes} from 'react-router-dom';
-import {Spinner} from './components/Spinner';
-import {RequireAuth} from 'lincd-auth/lib/components/RequireAuth';
+import React, { lazy, Suspense } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { Spinner } from './components/Spinner';
+import { RequireAuth } from 'lincd-auth/components/RequireAuth';
 import PageNotFound from './pages/PageNotFound';
 
-//In React 18 you can use 'lazy' to import pages only when you need them.
+//From 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 bundles are automatically loaded
 interface RouteObj {
   path: string;
@@ -14,7 +14,8 @@ interface RouteObj {
   excludeFromMenu?: boolean;
   label?: string;
 }
-export const ROUTES: {[key: string]: RouteObj} = {
+
+export const ROUTES: { [key: string]: RouteObj } = {
   index: {
     path: '/',
     component: lazy(() => import('./pages/Home' /* webpackPrefetch: true */)),
@@ -44,7 +45,7 @@ export default function AppRoutes() {
         //if a route is marked as requireAuth, wrap it in the RequireAuth component and pass the signinRoute
         const AuthGuard = route.requireAuth ? RequireAuth : React.Fragment;
         const authProps = route.requireAuth
-          ? {signinRoute: ROUTES.signin.path}
+          ? { signinRoute: ROUTES.signin.path }
           : {};
 
         // define a render function that determines what to render based on the component and route.render

package/defaults/app-with-backend/src/theme.css

@@ -0,0 +1,100 @@
+@import 'tailwindcss';
+/*apply tailwind config, which ensures that all LINCD components are considered "content" for tailwind */
+@config "../../node_modules/lincd-cli/lib/esm/tailwind.config.js";
+
+/*Use this to generate ALL css variables */
+/*@theme static {*/
+/*    --*: initial;*/
+/*--color-primary: var(--color-red-500);*/
+/*--color-secondary: var(--color-blue-500);*/
+/*}*/
+
+/*for theme variables, see https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css*/
+
+/*@use 'todomvc-app-css/index.css';*/
+/*@use 'todomvc-common/base.css';*/
+
+/*LINCD uses tailwind for creating themes, see https://tailwindcss.com/docs/theme#what-are-theme-variables */
+/*@theme {*/
+/*  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',*/
+/*    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';*/
+/*  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;*/
+/*  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,*/
+/*    'Liberation Mono', 'Courier New', monospace;*/
+/*}*/
+
+@theme {
+  /* Primary Palette mapped to Tailwind sky */
+  --color-primary-50: var(--color-sky-50);
+  --color-primary-100: var(--color-sky-100);
+  --color-primary-200: var(--color-sky-200);
+  --color-primary-300: var(--color-sky-300);
+  --color-primary-400: var(--color-sky-400);
+  --color-primary-500: var(--color-sky-500);
+  --color-primary-600: var(--color-sky-600);
+  --color-primary-700: var(--color-sky-700);
+  --color-primary-800: var(--color-sky-800);
+  --color-primary-900: var(--color-sky-900);
+
+  /* === Shadows === */
+  --shadow-surface: var(--shadow-sm); /* Background panels, sections */
+  --shadow-card: var(--shadow-md); /* Cards, organized content blocks */
+  --shadow-popover: var(--shadow-lg); /* Tooltips, dropdowns, popovers */
+  --shadow-modal: var(--shadow-2xl); /* Modals, overlays */
+  --shadow-floating-action: var(
+    --shadow-lg
+  ); /* Floating buttons, floating toolbars */
+  --shadow-content: none; /* Buttons, inputs inside surfaces */
+
+  /* === Backgrounds / Surfaces === */
+  --bg-page: var(--color-gray-50); /* Main app background */
+  --bg-section: var(--color-gray-100); /* Sections inside pages */
+  --bg-card: var(--color-white); /* Cards */
+  --bg-popover: var(--color-white); /* Popovers, dropdowns */
+  --bg-modal: var(--color-white); /* Modals, dialogs */
+  --bg-sidebar: var(--color-gray-200); /* Sidebars */
+  --bg-footer: var(--color-gray-300); /* Footer areas */
+  --bg-overlay: var(--color-gray-900); /* Overlay scrims (dark) */
+
+  /* for bg-card and text-card? */
+  --color-card: var(--color-white);
+
+  /* === Z-Index === */
+  --z-base: 0; /* Normal document flow */
+  --z-surface: 10; /* Cards, panels */
+  --z-popover: 30; /* Dropdowns, popovers */
+  --z-modal: 50; /* Modals, dialogs */
+  --z-overlay: 75; /* Overlays, backdrops */
+  --z-tooltip: 100; /* Tooltips, highest priority */
+
+  /* === Border Radius === */
+  /*TODO: should this not be much larger then card? from large to small? */
+  --radius-surface: var(--radius-sm); /* Default background surfaces */
+  --radius-card: var(--radius-lg); /* Cards and panels */
+  /*TODO: we need something for items inside a card, like buttons and images. Or even if they are on surfaces */
+  --radius-element: var(--radius-md); /* Images and buttons */
+  --radius-popover: var(--radius-md); /* Popovers, tooltips, dropdowns */
+  --radius-modal: var(--radius-2xl); /* Modals, overlays */
+  --radius-floating-action: var(
+    --radius-full
+  ); /* Floating buttons, floating toolbars (FAB) */
+  --radius-none: 0px; /* Flat design option */
+
+  /* === Z-Index === */
+  --z-base: 0; /* Normal flow */
+  --z-surface: 10; /* Cards, panels */
+  --z-popover: 30; /* Dropdowns, popovers */
+  --z-modal: 50; /* Modals, dialogs */
+  --z-overlay: 75; /* Overlays, spinners */
+  --z-tooltip: 100; /* Tooltips, highest priority */
+
+  /* === Spacing (example for consistent gaps/padding) === */
+  --spacing-card: calc(var(--spacing) * 4);
+
+  /* TODO: set Header font family and font sizes in theme. Should they become increasingly bigger? Or should they be semantic? Like sub-header, ... we had some names once*/
+}
+
+/*@source utilities:bg:*,text:*,p-*,m-*,rounded-*,shadow-**/
+/*@source inline("utilities:bg:*,text:*,p-*,m-*,w-*,h-*,min-w-*,min-h-*,max-w-*,max-h-*,gap-*,space-x-*,space-y-*,border-*,opacity-*,scale-*,rotate-*,translate-*,z-*,leading-*,tracking-*,font-*,rounded-*,shadow-*")*/
+/*@source inline("components:btn-primary,card")*/
+/*@source inline("shortcuts:container")*/

package/defaults/app-with-backend/tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "esnext",
     "moduleResolution": "node",
     "sourceMap": true,
-    "target": "es2019",
+    "target": "es2018",
+    "resolveJsonModule": true,
     "declaration": false,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
@@ -11,9 +12,11 @@
     "resolveJsonModule": true,
     "jsx": "react-jsx",
     "types": ["node", "react", "react-dom"],
-    "paths": {
-      "react": ["../node_modules/@types/react","../../../node_modules/@types/react"]
-    },
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ],
     "pretty": true
   },
   "files": ["./src/index.tsx"],

package/defaults/component.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import "./${hyphen_name}.scss";
 import {default as style} from "./${hyphen_name}.scss.json";
-import {registerPackageModule,linkedComponent} from '../package';
+import {linkedComponent} from '../package';
 
 //TODO: replace SHAPE with an actual Shape class
 export const ${camel_name} = linkedComponent<SHAPE>(SHAPE,({source}) => {
   return <div className={style.${camel_name}}></div>;
 });
 
-//register all components in this file
-registerPackageModule(module);

package/defaults/package/package.json

@@ -29,10 +29,10 @@
     "web3"
   ],
   "dependencies": {
-    "lincd": "^0.6",
+    "lincd": "^1.0",
     "lincd-jsonld": "^0.1"
   },
   "devDependencies": {
-    "lincd-cli": "~1.1"
+    "lincd-cli": "^1.1"
   }
 }

package/defaults/package/src/index.ts

@@ -1,3 +1,4 @@
+import './types';
 import './ontologies/${hyphen_name}';
 
 //SHAPES FIRST

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

@@ -1,6 +1,6 @@
-import {NamedNode} from 'lincd/lib/models';
+import {NamedNode} from 'lincd/models';
 import {JSONLD} from 'lincd-jsonld/lib/utils/JSONLD';
-import {createNameSpace} from 'lincd/lib/utils/NameSpace';
+import {createNameSpace} from 'lincd/utils/NameSpace';
 import {linkedOntology} from '../package';
 //import all the exports of this file as one variable called _this (we need this at the end)
 import * as _this from './${hyphen_name}';
@@ -9,7 +9,14 @@ 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));
+  if (typeof module !== 'undefined' && typeof exports !== 'undefined') {
+    // CommonJS import
+    return import('../data/${hyphen_name}.json').then((data) => JSONLD.parse(data));
+  } else {
+    // ESM import
+    //@ts-ignore
+    return import('../data/${hyphen_name}.json',{ with: { type: "json" } }).then((data) => JSONLD.parse(data));
+  }
 };
 
 /**

package/defaults/package/src/package.ts

@@ -1,4 +1,12 @@
-import {linkedPackage} from 'lincd/lib/utils/Module';
+import {linkedPackage} from 'lincd/utils/Package';
 
-export const {linkedComponent, linkedComponentClass, linkedShape, linkedUtil, linkedOntology, registerPackageModule, registerPackageExport, packageExports, packageName} =
-  linkedPackage('${package_name}');
+export const {
+  linkedComponent,
+  linkedComponentClass,
+  linkedShape,
+  linkedUtil,
+  linkedOntology,
+  registerPackageExport,
+  packageExports,
+  packageName,
+} = linkedPackage('${package_name}');