Implemented TS compilation

2024-06-14 11:52:32 +03:00 · 2021-02-20 18:46:28 +01:00 · 2021-02-20 18:46:28 +01:00 · a2d9eb7aee
commit a2d9eb7aee
parent b65c40308d
6 changed files with 73 additions and 45 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -515,15 +515,6 @@
      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
      "dev": true
    },
-    "@types/ramda": {
-      "version": "0.27.38",
-      "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.38.tgz",
-      "integrity": "sha512-tZoQ0lv1WKkrpBHemL8yCkI9p8kUk/1PSMwhl0eeyqMQjD+2ePUtVLV8PpNS9Kq3OktObwOx9I3k+HumxTviRg==",
-      "dev": true,
-      "requires": {
-        "ts-toolbelt": "^6.15.1"
-      }
-    },
    "@types/relateurl": {
      "version": "0.2.28",
      "resolved": "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.28.tgz",
@ -536,6 +527,15 @@
      "integrity": "sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ==",
      "dev": true
    },
+    "@types/sass": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz",
+      "integrity": "sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
    "@types/uglify-js": {
      "version": "3.9.0",
      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.0.tgz",
@ -6626,12 +6626,6 @@
      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
      "dev": true
    },
-    "ramda": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
-      "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==",
-      "dev": true
-    },
    "read-pkg": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@ -8814,12 +8808,6 @@
        "yn": "3.1.1"
      }
    },
-    "ts-toolbelt": {
-      "version": "6.15.5",
-      "resolved": "https://registry.npmjs.org/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz",
-      "integrity": "sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==",
-      "dev": true
-    },
    "tsconfig-paths": {
      "version": "3.9.0",
      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz",
@ -8832,12 +8820,6 @@
        "strip-bom": "^3.0.0"
      }
    },
-    "tslib": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
-      "dev": true
-    },
    "tsutils": {
      "version": "3.20.0",
      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz",
--- a/package.json
+++ b/package.json
@ -50,11 +50,12 @@
    "@types/html-minifier": "^4.0.0",
    "@types/lunr": "^2.3.3",
    "@types/node": "^14.14.28",
-    "@types/ramda": "^0.27.37",
    "@types/resize-observer-browser": "^0.1.5",
+    "@types/sass": "^1.16.0",
    "@typescript-eslint/eslint-plugin": "^4.15.0",
    "@typescript-eslint/parser": "^4.15.0",
-    "autoprefixer": "10.2.4",
+    "autoprefixer": "^10.2.4",
+    "chokidar": "^3.5.1",
    "cssnano": "^4.1.10",
    "esbuild": "^0.8.46",
    "eslint": "^7.20.0",
@ -71,7 +72,6 @@
    "postcss-inline-svg": "^5.0.0",
    "postcss-svgo": "^4.0.2",
    "preact": "^10.5.12",
-    "ramda": "^0.27.1",
    "rimraf": "^3.0.2",
    "sass": "^1.32.6",
    "stylelint": "^13.9.0",
@ -82,7 +82,6 @@
    "svgo": "^2.0.1",
    "tiny-glob": "^0.2.8",
    "ts-node": "^9.1.1",
-    "tslib": "^2.1.0",
    "typescript": "^4.1.5"
  },
  "engines": {
--- a/tools/copy/index.ts
+++ b/tools/copy/index.ts
@ -38,7 +38,7 @@ import { mkdir, resolve } from "../resolve"
 *
 * @returns Transformed content
 */
-type CopyTransformFn = (content: string) => Promise<string> | string
+type CopyTransformFn = (content: string) => Promise<string>

 /* ------------------------------------------------------------------------- */

@ -71,7 +71,7 @@ export function copy(
        ? from(fs.copyFile(src, out))
        : from(fs.readFile(src, "utf8"))
            .pipe(
-              switchMap(content => from(fn(content))),
+              switchMap(content => fn(content)),
              switchMap(content => fs.writeFile(out, content))
            )
      ),
--- a/tools/index.ts
+++ b/tools/index.ts
@ -20,14 +20,16 @@
 * IN THE SOFTWARE.
 */

-// import { build } from "esbuild"
 import { minify as minhtml } from "html-minifier"
-import { concat } from "rxjs"
+import { concat, merge } from "rxjs"
 import { concatMap } from "rxjs/operators"

 import { copyAll } from "./copy"
 import { base, resolve } from "./resolve"
-import { transformStyle } from "./transform"
+import {
+  transformScript,
+  transformStyle
+} from "./transform"

 /* ----------------------------------------------------------------------------
 * Program
@ -79,7 +81,7 @@ const assets$ = concat(
  copyAll("**/*.html", {
    src: "src",
    out: base,
-    fn: content => {
+    fn: async content => {
      const metadata = require("../package.json")
      const banner =
        "{#-\n" +
@ -113,15 +115,37 @@ const styles$ = resolve("**/[!_]*.scss", { cwd: "src" })
  .pipe(
    concatMap(file => transformStyle({
      src: `src/${file}`,
-      out: `${base}/${file.replace(/\.scss$/, ".css")}`,
-      optimize: true // TODO: wrap with commander
+      out: `${base}/${file.replace(/\.scss$/, ".css")}`
    }))
  )

+/* Transform scripts with ESBuild */
+const scripts$ = merge(
+
+  /* Transform application */
+  transformScript({
+    src: "src/assets/javascripts/index.ts",
+    out: `${base}/assets/javascripts/bundle.js`
+  }),
+
+  /* Transform application overrides */
+  transformScript({
+    src: "src/overrides/assets/javascripts/index.ts",
+    out: `${base}/overrides/assets/javascripts/bundle.js`
+  }),
+
+  /* Transform search worker */
+  transformScript({
+    src: "src/assets/javascripts/integrations/search/worker/main/index.ts",
+    out: `${base}/assets/javascripts/worker/search.js`
+  })
+)
+
 /* Compile everything */
 concat(
  dependencies$,
  assets$,
-  styles$
+  styles$,
+  scripts$
 )
-  .subscribe()
+  .subscribe(console.log)
--- a/tools/resolve/index.ts
+++ b/tools/resolve/index.ts
@ -55,7 +55,7 @@ export const base = "material2"
 * @param pattern - Pattern
 * @param options - Options
 *
- * @returns Files
+ * @returns File observable
 */
 export function resolve(
  pattern: string, options?: ResolveOptions
--- a/tools/transform/index.ts
+++ b/tools/transform/index.ts
@ -20,6 +20,7 @@
 * IN THE SOFTWARE.
 */

+import { build } from "esbuild"
 import * as fs from "fs/promises"
 import * as path from "path"
 import postcss from "postcss"
@ -27,6 +28,7 @@ import { Observable, defer, merge } from "rxjs"
 import {
  endWith,
  ignoreElements,
+  mapTo,
  switchMap,
  tap
 } from "rxjs/operators"
@ -45,7 +47,6 @@ import { base, mkdir } from "../resolve"
 interface TransformOptions {
  src: string                          /* Source file */
  out: string                          /* Target file */
-  optimize?: boolean                   /* Optimize assets */
 }

 /* ----------------------------------------------------------------------------
@ -69,7 +70,7 @@ const root = new RegExp(`file://${path.resolve(".")}/`, "g")
 * @returns File observable
 */
 export function transformStyle(
-  { src, out, optimize }: TransformOptions
+  { src, out }: TransformOptions
 ): Observable<string> {
  return defer(() => promisify(sass)({
    file: src,
@ -92,7 +93,7 @@ export function transformStyle(
          ],
          encode: false
        }),
-        ...optimize ? [require("cssnano")] : []
+        require("cssnano")
      ])
        .process(css, {
          from: src,
@ -112,3 +113,25 @@ export function transformStyle(
      endWith(out)
    )
 }
+
+/**
+ * Transform a script
+ *
+ * @param options - Options
+ *
+ * @returns File observable
+ */
+export function transformScript(
+  { src, out }: TransformOptions
+): Observable<string> {
+  return defer(() => build({
+    entryPoints: [src],
+    outfile: out,
+    bundle: true,
+    sourcemap: true,
+    minify: true
+  }))
+    .pipe(
+      mapTo(out)
+    )
+}