Upgrade website (#131)

* Working playground

* Proper playground tsWorker fix

* prettier

* Remove js that wasnt meant to be checked in

* Ignore cdn'd JS from prettier

Author: Perryvw

.github/workflows/ci.yml

@@ -9,10 +9,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12
+      - name: Use Node.js 16
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       - run: npm ci
       - run: npm run build
       - run: npm run lint

.github/workflows/deploy.yml

@@ -20,10 +20,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12
+      - name: Use Node.js 16
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       - run: npm ci
       - run: npm run build
       - name: Create gh-pages artifact

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .docusaurus
 /build
-.DS_Store
+.DS_Store
+static/cdn.tsWorker.js

.prettierignore

@@ -1,2 +1,3 @@
 .docusaurus
 /build
+/static/cdn.tsWorker.js

docusaurus-plugin.js

@@ -16,20 +16,15 @@ module.exports = () => ({
             },
             resolve: {
                 alias: {
-                    // Replace vendored monaco-typescript services build with typescript, already used by typescript-to-lua
-                    [require.resolve("monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js")]:
-                        require.resolve("typescript"),
-
-                    // Exclude builtin monaco-typescript libs
-                    [require.resolve("monaco-editor/esm/vs/language/typescript/lib/lib.js")]: resolve(
-                        "src/monaco-typescript-lib-stub.ts",
-                    ),
+                    // tsWorker downloaded by fetch-tsworker.js for our current TS version
+                    ["cdn.tsWorker"]: resolve("static/cdn.tsWorker.js"),
 
                     // Stub file resolution for playground
                     [require.resolve("typescript-to-lua/dist/transpilation/resolve.js")]:
                         resolve("src/resolve-stub.ts"),
                 },
                 fallback: {
+                    os: false,
                     fs: false,
                     perf_hooks: false,
                     buffer: require.resolve("buffer"),
@@ -38,23 +33,6 @@ module.exports = () => ({
                     path: require.resolve("path-browserify"),
                 },
             },
-            module: {
-                rules: [
-                    { test: /\.ttf$/, loader: "file-loader" },
-                    {
-                        test: /\.scss$/,
-                        exclude: /\.module\.scss$/,
-                        use: [...config.module.rules.find((r) => String(r.test) === "/\\.css$/").use, "sass-loader"],
-                    },
-                    {
-                        test: /\.module\.scss$/,
-                        use: [
-                            ...config.module.rules.find((r) => String(r.test) === "/\\.module\\.css$/").use,
-                            "sass-loader",
-                        ],
-                    },
-                ],
-            },
             plugins: [
                 new ProvidePlugin({
                     process: "process/browser",

docusaurus.config.js

@@ -88,6 +88,7 @@ module.exports = {
             darkTheme: require("prism-react-renderer/themes/vsDark"),
         },
         algolia: {
+            appId: "BH4D9OD16A",
             apiKey: "c0cf59beed38709e9ed6b0ac80b24ee5",
             indexName: "typescripttolua",
         },
@@ -109,5 +110,5 @@ module.exports = {
             },
         ],
     ],
-    plugins: [require.resolve("./docusaurus-plugin")],
+    plugins: ["docusaurus-plugin-sass", require.resolve("./docusaurus-plugin")],
 };

fetch-tsworker.mjs

@@ -0,0 +1,35 @@
+import fetch from "node-fetch";
+import fs from "fs";
+import path from "path";
+import process from "process";
+import ts from "typescript";
+
+// Fetch tsWorker for our TypeScript version from the CDN. This is required for the playground
+const SCRIPT_URL = `https://typescript.azureedge.net/cdn/${ts.version}/monaco/min/vs/language/typescript/tsWorker.js`;
+const TARGET_FILE = path.join("static", "cdn.tsWorker.js");
+
+async function fetchPlaygroundTsWorker() {
+    const response = await fetch(SCRIPT_URL);
+
+    if (response.ok) {
+        const writeStream = fs.createWriteStream(TARGET_FILE);
+        await new Promise((resolve, reject) => {
+            response.body.pipe(writeStream);
+            response.body.on("error", reject);
+            writeStream.on("finish", resolve);
+        });
+    } else {
+        throw new Error(
+            `Failed to fetch TS worker from ${SCRIPT_URL} (${response.status}):\n ${await response.text()}`,
+        );
+    }
+}
+
+console.log(`Fetching latest tsWorker for TS ${ts.version}`);
+
+fetchPlaygroundTsWorker()
+    .then(() => console.log(`Done! Wrote ${TARGET_FILE}`))
+    .catch((err) => {
+        console.error(`${err}`);
+        process.exitCode = 1;
+    });