Merge pull request #693 from vector-im/madlittlemods/686-682-local-fr…

…iendly-development-and-commonjs

Make the SDK friendly to locally link and develop on

package.json

@@ -11,9 +11,11 @@
     "lint-ci": "eslint src/",
     "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/",
     "test:postcss": "impunity --entry-point  scripts/postcss/tests/css-compile-variables.test.js scripts/postcss/tests/css-url-to-variables.test.js",
+    "test:sdk": "yarn build:sdk && cd ./scripts/sdk/test/ && yarn --no-lockfile && node test-sdk-in-esm-vite-build-env.js && node test-sdk-in-commonjs-env.js",
     "start": "vite --port 3000",
     "build": "vite build && ./scripts/cleanup.sh",
-    "build:sdk": "./scripts/sdk/build.sh"
+    "build:sdk": "./scripts/sdk/build.sh",
+    "watch:sdk": "./scripts/sdk/build.sh && yarn run vite build -c vite.sdk-lib-config.js --watch"
   },
   "repository": {
     "type": "git",
@@ -47,7 +49,7 @@
     "regenerator-runtime": "^0.13.7",
     "text-encoding": "^0.7.0",
     "typescript": "^4.3.5",
-    "vite": "^2.6.14",
+    "vite": "^2.9.8",
     "xxhashjs": "^0.2.2"
   },
   "dependencies": {

scripts/sdk/base-manifest.json

@@ -2,6 +2,18 @@
     "name": "hydrogen-view-sdk",
     "description": "Embeddable matrix client library, including view components",
     "version": "0.0.12",
-    "main": "./hydrogen.es.js",
-    "type": "module"
+    "main": "./lib-build/hydrogen.cjs.js",
+    "exports": {
+        ".": {
+            "import": "./lib-build/hydrogen.es.js",
+            "require": "./lib-build/hydrogen.cjs.js"
+        },
+        "./paths/vite": "./paths/vite.js",
+        "./style.css": "./asset-build/assets/theme-element-light.css",
+        "./theme-element-light.css": "./asset-build/assets/theme-element-light.css",
+        "./theme-element-dark.css": "./asset-build/assets/theme-element-dark.css",
+        "./main.js": "./asset-build/assets/main.js",
+        "./download-sandbox.html": "./asset-build/assets/download-sandbox.html",
+        "./assets/*": "./asset-build/assets/*"
+    }
 }

scripts/sdk/build.sh

@@ -2,8 +2,12 @@
 # Exit whenever one of the commands fail with a non-zero exit code
 set -e
 set -o pipefail
+# Enable extended globs so we can use the `!(filename)` glob syntax
+shopt -s extglob
 
-rm -rf target
+# Only remove the directory contents instead of the whole directory to maintain
+# the `npm link`/`yarn link` symlink
+rm -rf target/*
 yarn run vite build -c vite.sdk-assets-config.js
 yarn run vite build -c vite.sdk-lib-config.js
 yarn tsc -p tsconfig-declaration.json
@@ -12,19 +16,10 @@ mkdir target/paths
 # this doesn't work, the ?url imports need to be in the consuming project, so disable for now
 # ./scripts/sdk/transform-paths.js ./src/platform/web/sdk/paths/vite.js ./target/paths/vite.js
 cp doc/SDK.md target/README.md
-pushd target
-pushd asset-build/assets
-mv main.*.js ../../main.js
-# Create a copy of light theme for backwards compatibility 
-cp theme-element-light.*.css ../../style.css
-# Remove asset hash from css files
-mv theme-element-light.*.css ../../theme-element-light.css
-mv theme-element-dark.*.css ../../theme-element-dark.css
-mv download-sandbox.*.html ../../download-sandbox.html
-rm *.js *.wasm
-mv ./* ../../
+pushd target/asset-build
+rm index.html
 popd
-rm -rf asset-build
-mv lib-build/* .
-rm -rf lib-build
+pushd target/asset-build/assets
+# Remove all `*.wasm` and `*.js` files except for `main.js`
+rm !(main).js *.wasm
 popd

scripts/sdk/create-manifest.js

@@ -3,21 +3,7 @@ const fs = require("fs");
 const appManifest = require("../../package.json");
 const baseSDKManifest = require("./base-manifest.json");
 /*
-    need to leave exports out of base-manifest.json because of #vite-bug,
-    with the downside that we can't support environments that support
-    both esm and commonjs modules, so we pick just esm.
-    ```
-    "exports": {
-        ".": {
-            "import": "./hydrogen.es.js",
-            "require": "./hydrogen.cjs.js"
-        },
-        "./paths/vite": "./paths/vite.js",
-        "./style.css": "./style.css"
-    },
-    ```
-
-    Also need to leave typescript type definitions out until the
+    Need to leave typescript type definitions out until the
     typescript conversion is complete and all imports in the d.ts files
     exists.
     ```

scripts/sdk/test/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+yarn.lock

scripts/sdk/test/deps.d.ts

@@ -0,0 +1,2 @@
+// Keep TypeScripts from complaining about hydrogen-view-sdk not having types yet
+declare module "hydrogen-view-sdk";

scripts/sdk/test/esm-entry.ts

@@ -0,0 +1,21 @@
+import * as hydrogenViewSdk from "hydrogen-view-sdk";
+import downloadSandboxPath from 'hydrogen-view-sdk/download-sandbox.html?url';
+import workerPath from 'hydrogen-view-sdk/main.js?url';
+import olmWasmPath from '@matrix-org/olm/olm.wasm?url';
+import olmJsPath from '@matrix-org/olm/olm.js?url';
+import olmLegacyJsPath from '@matrix-org/olm/olm_legacy.js?url';
+const assetPaths = {
+  downloadSandbox: downloadSandboxPath,
+  worker: workerPath,
+  olm: {
+      wasm: olmWasmPath,
+      legacyBundle: olmLegacyJsPath,
+      wasmBundle: olmJsPath
+  }
+};
+import "hydrogen-view-sdk/theme-element-light.css";
+
+console.log('hydrogenViewSdk', hydrogenViewSdk);
+console.log('assetPaths', assetPaths);
+
+console.log('Entry ESM works ✅');

scripts/sdk/test/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app" class="hydrogen"></div>
+    <script type="module" src="./esm-entry.ts"></script>
+  </body>
+</html>

scripts/sdk/test/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "test-sdk",
+  "version": "0.0.0",
+  "description": "",
+  "dependencies": {
+    "hydrogen-view-sdk": "link:../../../target"
+  }
+}

scripts/sdk/test/test-sdk-in-commonjs-env.js

@@ -0,0 +1,13 @@
+// Make sure the SDK can be used in a CommonJS environment.
+// Usage: node scripts/sdk/test/test-sdk-in-commonjs-env.js
+const hydrogenViewSdk = require('hydrogen-view-sdk');
+
+// Test that the "exports" are available:
+// Worker
+require.resolve('hydrogen-view-sdk/main.js');
+// Styles
+require.resolve('hydrogen-view-sdk/theme-element-light.css');
+// Can access files in the assets/* directory
+require.resolve('hydrogen-view-sdk/assets/main.js');
+
+console.log('SDK works in CommonJS ✅');

scripts/sdk/test/test-sdk-in-esm-vite-build-env.js

@@ -0,0 +1,19 @@
+const { resolve } = require('path');
+const { build } = require('vite');
+
+async function main() {
+  await build({
+    outDir: './dist',
+    build: {
+      rollupOptions: {
+        input: {
+          main: resolve(__dirname, 'index.html')
+        }
+      }
+    }
+  });
+
+  console.log('SDK works in Vite build ✅');
+}
+
+main();

vite.sdk-assets-config.js

@@ -3,11 +3,33 @@ const mergeOptions = require('merge-options');
 const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes");
 const {commonOptions, compiledVariables} = require("./vite.common-config.js");
 
+// These paths will be saved without their hash so they havea  consisent path to
+// reference
+const pathsToExport = [
+    "main.js",
+    "download-sandbox.html",
+    "theme-element-light.css",
+    "theme-element-dark.css",
+];
+
 export default mergeOptions(commonOptions, {
     root: "src/",
     base: "./",
     build: {
         outDir: "../target/asset-build/",
+        rollupOptions: {
+            output: {
+              assetFileNames: (chunkInfo) => {
+                  // Get rid of the hash so we can consistently reference these
+                  // files in our `package.json` `exports`
+                  if(pathsToExport.includes(path.basename(chunkInfo.name))) {
+                    return "assets/[name].[ext]";
+                  }
+
+                return "assets/[name]-[hash][extname]";
+              }
+            }
+        }
     },
     plugins: [
         themeBuilder({