Refactor LD-wizard build script (#178)

* refactor: Use NPM instead of Yarn * refactor: LDWizard-build script no longer compiles the LD-Wizard #166 * Make package commands Windows compatible * Remove root export from package
pldn · Mar 4, 2024 · b11f90a · b11f90a
1 parent 9b70fe6
commit b11f90a
Show file tree

Hide file tree

Showing 10 changed files with 4,159 additions and 925 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 lib
 /test
 .npmrc
+script/bin
 
 # Based on https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .pnp.*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,11 @@
 {
   "name": "@pldn/ldwizard",
   "version": "3.0.9",
+  "license": "EUPL-1.2",
+  "author": {
+    "name": "Triply",
+    "email": "[email protected]"
+  },
   "contributors": [
     {
       "name": "Gerwin Bosch",
@@ -15,25 +20,41 @@
       "email": "[email protected]"
     }
   ],
-  "author": {
-    "name": "Triply",
-    "email": "[email protected]"
+  "type": "module",
+  "imports": {
+    "#*": {
+      "import": {
+        "default": "./src/*"
+      }
+    }
+  },
+  "exports": {
+    "./WizardConfig": "./types/WizardConfig.d.ts",
+    "./bulkSparql": "./src/utils/bulkSparql.js"
+  },
+  "bin": {
+    "ldwizard-build": "./script/bin/ldwizard-build.js"
   },
-  "license": "EUPL-1.2",
   "scripts": {
-    "prepublishOnly": "npm run build",
-    "build": "rm -rf ./webpack/lib ./lib ./webpack/tsconfig-webpack.tsbuildinfo && tsc -p ./tsconfig.json && tsc -p tsconfig-webpack.json && webpack --config ./webpack/lib/config.js  && chmod +x ./webpack/lib/ldwizard-build.js",
+    "build": "shx rm -rf ./webpack/lib ./lib ./webpack/tsconfig-webpack.tsbuildinfo && tsc -p ./tsconfig.json && tsc -p tsconfig-webpack.json && webpack --config ./webpack/lib/config.js && npm run buildScript",
+    "buildScript": "shx rm -rf ./script/bin ./script/tsconfig-buildScript.tsbuildinfo && tsc -p tsconfig-buildScript.json && chmod +x ./script/bin/ldwizard-build.js",
     "dev": "tsc -p tsconfig-webpack.json && webpack serve --history-api-fallback --host 0.0.0.0 --port 4000 --hot  --config ./webpack/lib/config.js",
+    "ldwizard-build": "./script/bin/ldwizard-build.js",
+    "prepublishOnly": "npm run build --omit=dev",
     "start": "npm run build && npx http-server -c-1 ./lib",
-    "ldwizard-build": "./webpack/lib/ldwizard-build.js",
     "test": "tsc -p ./tsconfig-test.json && mocha $(find ./test -name '*.test.js') --require source-map-support/register",
     "util:analyzeBundle": "ANALYZE_BUNDLE=true npm run build",
     "util:bundlesize": "bundlesize",
     "util:lint": "ESLINT_STRICT=true  eslint --ext .tsx --ext .ts ./src",
     "util:markStable": "git tag -d stable && git push origin :refs/tags/stable && git tag stable && git push origin stable",
     "util:prettify": "prettier --parser typescript --write $(find ./src -regex '.*\\.tsx?$') && prettier --parser css --write $(find ./src -regex '.*\\.?scss$')",
-    "util:validateTs:watch": "tsc -p ./tsconfig-validate.json --noEmit --watch --preserveWatchOutput",
-    "util:validateTs": "tsc -p ./tsconfig-validate.json --noEmit"
+    "util:validateTs": "tsc -p ./tsconfig-validate.json --noEmit",
+    "util:validateTs:watch": "tsc -p ./tsconfig-validate.json --noEmit --watch --preserveWatchOutput"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   },
   "lint-staged": {
     "*.ts?(x)": [
@@ -50,18 +71,19 @@
       "prettier --parser css --write"
     ]
   },
-  "bin": {
-    "ldwizard-build": "./webpack/lib/ldwizard-build.js"
-  },
   "dependencies": {
-    "-": "^0.0.1",
+    "commander": "^12.0.0",
+    "esbuild": "^0.20.1"
+  },
+  "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/plugin-transform-runtime": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/runtime": "^7.23.9",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@esbuild-kit/esm-loader": "^2.6.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
@@ -84,6 +106,7 @@
     "@types/react": "18.2.58",
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
+    "@types/sparqljs": "^3.1.10",
     "@types/validator": "^13.11.9",
     "@types/webpack": "^5.28.5",
     "@types/webpack-bundle-analyzer": "^4.7.0",
@@ -93,9 +116,7 @@
     "babel-loader": "^9.1.2",
     "bundlesize2": "^0.0.31",
     "chai": "^5.1.0",
-    "chardet": "^2.0.0",
     "classnames": "^2.5.1",
-    "commander": "^12.0.0",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "eslint": "^8.57.0",
@@ -111,8 +132,6 @@
     "lint-staged": "^15.2.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "markdown-loader": "^8.0.0",
-    "marked": "^12.0.0",
     "mini-css-extract-plugin": "^2.8.0",
     "mocha": "^10.3.0",
     "n3": "^1.17.2",
@@ -129,11 +148,14 @@
     "rdf-js": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
     "react-refresh": "^0.14.0",
     "react-router-dom": "^6.22.1",
     "recoil": "^0.7.7",
+    "rehype-raw": "^7.0.0",
     "rocketrml": "^2.1.2",
     "sass-loader": "^14.1.1",
+    "shx": "^0.3.4",
     "source-map-loader": "^5.0.0",
     "source-map-support": "^0.5.21",
     "style-loader": "^3.3.4",
@@ -151,11 +173,6 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "bundlesize": [
     {
       "compression": "none",
@@ -165,26 +182,5 @@
       "compression": "none",
       "path": "lib/LDWizard-base.min.css"
     }
-  ],
-  "devDependencies": {
-    "@esbuild-kit/esm-loader": "^2.6.5",
-    "@types/sparqljs": "^3.1.10"
-  },
-  "exports": {
-    ".": {
-      "import": {
-        "default": "./src/index.ts"
-      }
-    },
-    "./WizardConfig": "./types/WizardConfig.d.ts",
-    "./bulkSparql": "./src/utils/bulkSparql.js"
-  },
-  "type": "module",
-  "imports": {
-    "#*": {
-      "import": {
-        "default": "./src/*"
-      }
-    }
-  }
-}
+  ]
+}
diff --git a/webpack/ldwizard-build.ts → script/ldwizard-build.ts b/webpack/ldwizard-build.ts → script/ldwizard-build.ts
@@ -1,9 +1,8 @@
 #!/usr/bin/env node
 import { program } from "commander";
-import webpack from "webpack";
-import { getConfig } from "./config.js";
 import * as path from "path";
 import * as fs from "fs";
+import * as esbuild from "esbuild";
 import url from "url";
 
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
@@ -15,29 +14,30 @@ program.action(async () => {
     program.outputHelp();
     throw new Error("No config file specified");
   }
-  const webpackConfig = getConfig({ production: true });
   console.info("Config found at", path.resolve(process.cwd(), entrypoint));
-  // here we set the entry point to the config file or custom config file
-  (webpackConfig.entry as webpack.EntryObject)["config"] = path.resolve(process.cwd(), entrypoint);
-
-  const compiler = webpack(webpackConfig);
-  compiler.name = "LDWizard-base";
-  console.info("Start webpack compilation");
-  await new Promise<void>((resolve, reject) => {
-    compiler.hooks.compile.tap("LDWizard-base", () => {
-      console.info(`[LD-Wizard] Compiling `);
-    });
-    compiler.hooks.done.tap("LDWizard-base", (stats) => {
-      if (!stats.hasErrors()) {
-        console.info(stats.toString(typeof webpackConfig.stats !== "boolean"?webpackConfig.stats:"No stats :("));
-        return resolve();
-      }
-      console.error(stats.toJson().errors?.[0]);
-      return reject(`Failed to compile LD-Wizard`);
-    });
-    compiler.run(() => {});
+  const outFolder = path.resolve(process.cwd(), "./lib");
+  // Ensure that the outfolder exist
+  if (!fs.existsSync(outFolder)) fs.mkdirSync(outFolder, { recursive: true });
+  const wizardLibDir = path.resolve(__dirname, "../../lib");
+
+  console.info("Compiling config")
+  await esbuild.build({
+    entryPoints: [path.resolve(process.cwd(), entrypoint)],
+    bundle: true,
+    minify: true,
+    sourcemap: true,
+    outfile: path.resolve(outFolder, "config.min.js"),
+    loader: { ".csv": "text", ".ttl": "text", ".svg": "file", ".png": "file", ".md": "text" },
   });
-  console.info("Moving docker files");
+
+  console.info("Copy ldwizard files");
+  const wizardLibFiles = fs.readdirSync(wizardLibDir);
+  for (const file of wizardLibFiles) {
+    // We've just compiled these, lets not override them.
+    if (file.startsWith("config.min.js")) continue;
+    fs.copyFileSync(path.resolve(wizardLibDir, file), path.resolve(outFolder, file));
+  }
+
   const dockerOriginFolder = path.resolve(__dirname, "../../docker");
   const dockerFolder = path.resolve(process.cwd(), "docker");
 

diff --git a/src/containers/App/WelcomePage.tsx b/src/containers/App/WelcomePage.tsx
@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, Container, Paper } from "@mui/material";
 import { Link } from "react-router-dom";
 import mdStyles from "./markdownStyle.scss";
-
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 interface Props {
   content: string;
 }
@@ -15,34 +16,36 @@ const WelcomePage: React.FC<Props> = ({ content }) => {
       <Paper square>
         <Container>
           <Container>
-          <Link to="/1">
-            <Button
-              color="primary"
-              variant="contained"
-              size="medium"
-              startIcon={<FontAwesomeIcon icon="play" />}
-              className={styles.actionButton}
-              style={{marginTop: 60, marginLeft: 30, zIndex: 1, textTransform: 'none'}}
-            >
-              Get Started Right Away!
-            </Button>
-          </Link>
+            <Link to="/1">
+              <Button
+                color="primary"
+                variant="contained"
+                size="medium"
+                startIcon={<FontAwesomeIcon icon="play" />}
+                className={styles.actionButton}
+                style={{ marginTop: 60, marginLeft: 30, zIndex: 1, textTransform: "none" }}
+              >
+                Get Started Right Away!
+              </Button>
+            </Link>
+          </Container>
+          <Markdown rehypePlugins={[rehypeRaw]} className={mdStyles.markdownContent}>
+            {content}
+          </Markdown>
+          <Container>
+            <Link to="/1">
+              <Button
+                color="primary"
+                variant="contained"
+                size="large"
+                startIcon={<FontAwesomeIcon icon="play" />}
+                className={styles.actionButton}
+                style={{ marginTop: 40, marginLeft: 30, zIndex: 1, textTransform: "none" }}
+              >
+                Get Started!
+              </Button>
+            </Link>
           </Container>
-          <div style={{marginTop: -40, overflow: "hidden"}} className={mdStyles.markdownContent} dangerouslySetInnerHTML={{ __html: content }} />
-        <Container>
-          <Link to="/1">
-            <Button
-              color="primary"
-              variant="contained"
-              size="large"
-              startIcon={<FontAwesomeIcon icon="play" />}
-              className={styles.actionButton}
-              style={{marginTop: 40, marginLeft: 30, zIndex: 1, textTransform:'none'}}
-            >
-              Get Started!
-            </Button>
-          </Link>
-        </Container>
         </Container>
       </Paper>
     </Container>

diff --git a/src/containers/App/markdownStyle.scss b/src/containers/App/markdownStyle.scss
@@ -7,6 +7,8 @@
   min-width: 0;
   background-color: white;
   padding: 40px 60px;
+  margin-top: -40px;
+  overflow: hidden;
 
   //Lists
   ul {

diff --git a/src/containers/Upload/index.tsx b/src/containers/Upload/index.tsx
@@ -9,7 +9,6 @@ import { Parser, Store, DataFactory, Term } from "n3";
 import RMLGenerator from "@rmlio/yarrrml-parser/lib/rml-generator";
 import { mappingSourceState, sourceState, matrixState, transformationConfigState } from "../../state/index.ts";
 import config from "../../config/index.ts";
-import * as chardet from 'chardet';
 
 class EmptySpaceInRowError extends Error {
   constructor(message) {

diff --git a/tsconfig-buildScript.json b/tsconfig-buildScript.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig-base.json",
+  "compilerOptions": {
+    "outDir": "./script/bin",
+    "rootDir": "./script",
+    "incremental": true,
+    "strict": false,
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "removeComments": false,
+  },
+  "include": [
+    "./script/**.ts",
+    "./typings-custom/main.d.ts"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,5 +16,5 @@
     "noImplicitThis": false,
     "noUnusedLocals": false,
   },
-  "include": ["./src/**/*", "./webpack/*.ts", "./typings-custom/main.d.ts"],
+  "include": ["./src/**/*", "./webpack/*.ts", "./typings-custom/main.d.ts", "script/ldwizard-build.ts"],
 }