mesa-dot-dev · OliverGilan · Mar 1, 2023
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -6,6 +6,6 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": [],
+  "ignore": ["remote-view-demos"],
   "updateInternalDependents": "always"
 }
diff --git a/.changeset/thin-timers-tease.md b/.changeset/thin-timers-tease.md
@@ -0,0 +1,6 @@
+---
+'@modular-scripts/modular-types': minor
+'@modular-scripts/remote-view': minor
+---
+
+Implement RemoteView
diff --git a/.eslintignore b/.eslintignore
@@ -42,4 +42,7 @@ yarn-error.log*
 *.tsbuildinfo
 
 # Top level test fixtures
-/__fixtures__
+/__fixtures__
+
+# Only used in RemoteView tests
+packages/remote-view-fake-cdn
diff --git a/.prettierignore b/.prettierignore
@@ -5,3 +5,4 @@ packages/*/build
 packages/*/public
 packages/*/dist-cjs
 packages/*/dist-types
+packages/remote-view-fake-cdn
diff --git a/__fixtures__/remote-view-fake-cdn/README.md b/__fixtures__/remote-view-fake-cdn/README.md
@@ -0,0 +1,34 @@
+# RemoteView Fake ESM CDN
+
+This directory gets statically hosted by
+`packages/remote-view/src/__tests__/serve.js` in integration tests. The same
+script is also used manually to run the `remote-view-demos` package examples.
+
+## Motivation
+
+To test `<RemoteView />` locally, we need ESM views that are (a) built and (b)
+hosted and exposed via http. This is expensive and complicated to do on-the-fly,
+hence we have a small set of views/dependencies pre-built and exposed.
+
+## Contents
+
+- 4 pre-built ESM views: `esm-view-card`, `esm-view-list` (used in integration
+  tests), `view1`, `view2` (used in demos)
+- React and ReactDOM at 17.0.2, exposed in the same way it would be by esm.sh
+  (v106). This results in various dirs and files.
+
+`view1` and `view2` are built against `esm.sh`, whereas the others are built
+against `localhost:8484`.
+
+## Rebuilding the contents
+
+For any ESM view, you need to `yarn modular build` it, which usually requires
+pasting the view into the root `packages` dir temporarily. These packages can't
+live there permanently, as it inteferes with Modular's own tests.
+
+For ESM CDN content (React, ReactDOM etc), these must be manually downloaded and
+exposed into this directory using an identical structure.
+
+Sometimes, it's neccessary to tweak URLs to remove preceding slashes (inside ESM
+view index.html files) or add `.js` extensions (for esm.sh manually-downloaded
+content).
diff --git a/__fixtures__/remote-view-fake-cdn/esm-view-card/index.html b/__fixtures__/remote-view-fake-cdn/esm-view-card/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="static/js/_trampoline.js"></script>
+  </body>
+</html>
diff --git a/__fixtures__/remote-view-fake-cdn/esm-view-card/package.json b/__fixtures__/remote-view-fake-cdn/esm-view-card/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "esm-view-card",
+  "version": "1.0.0",
+  "modular": {
+    "type": "esm-view",
+    "externalCdnTemplate": "http://localhost:8484/[name]@[version]"
+  },
+  "dependencies": {
+    "react": "17.0.2"
+  },
+  "bundledDependencies": [],
+  "module": "/static/js/main.5a34a408.js"
+}
diff --git a/__fixtures__/remote-view-fake-cdn/esm-view-card/static/js/_trampoline.js b/__fixtures__/remote-view-fake-cdn/esm-view-card/static/js/_trampoline.js
@@ -0,0 +1,5 @@
+import ReactDOM from 'http://localhost:8484/react-dom@17.0.2.js';
+import React from 'http://localhost:8484/react@17.0.2.js';
+import Component from './main.5a34a408.js';
+var DOMRoot = document.getElementById('root');
+ReactDOM.render(React.createElement(Component, null), DOMRoot);
diff --git a/__fixtures__/remote-view-fake-cdn/esm-view-card/static/js/main.5a34a408.js b/__fixtures__/remote-view-fake-cdn/esm-view-card/static/js/main.5a34a408.js
diff --git a/__fixtures__/remote-view-fake-cdn/esm-view-list/index.html b/__fixtures__/remote-view-fake-cdn/esm-view-list/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="static/js/_trampoline.js"></script>
+  </body>
+</html>
diff --git a/__fixtures__/remote-view-fake-cdn/esm-view-list/package.json b/__fixtures__/remote-view-fake-cdn/esm-view-list/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "esm-view-list",
+  "version": "1.0.0",
+  "modular": {
+    "type": "esm-view",
+    "externalCdnTemplate": "http://localhost:8484/[name]@[version]"
+  },
+  "dependencies": {
+    "react": "17.0.2"
+  },
+  "bundledDependencies": [],
+  "module": "/static/js/main.874f720c.js"
+}
diff --git a/__fixtures__/remote-view-fake-cdn/esm-view-list/static/js/_trampoline.js b/__fixtures__/remote-view-fake-cdn/esm-view-list/static/js/_trampoline.js
@@ -0,0 +1,5 @@
+import ReactDOM from 'http://localhost:8484/react-dom@17.0.2.js';
+import React from 'http://localhost:8484/react@17.0.2.js';
+import Component from './main.874f720c.js';
+var DOMRoot = document.getElementById('root');
+ReactDOM.render(React.createElement(Component, null), DOMRoot);
diff --git a/__fixtures__/remote-view-fake-cdn/esm-view-list/static/js/main.874f720c.js b/__fixtures__/remote-view-fake-cdn/esm-view-list/static/js/main.874f720c.js
diff --git a/__fixtures__/remote-view-fake-cdn/index.html b/__fixtures__/remote-view-fake-cdn/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/static/js/_trampoline.js"></script>
+  </body>
+</html>
diff --git a/__fixtures__/remote-view-fake-cdn/react-dom@17.0.2.js b/__fixtures__/remote-view-fake-cdn/react-dom@17.0.2.js
@@ -0,0 +1,3 @@
+/* esm.sh - react-dom@17.0.2 */
+export * from 'http://localhost:8484/v106/react-dom@17.0.2/es2022/react-dom.js';
+export { default } from 'http://localhost:8484/v106/react-dom@17.0.2/es2022/react-dom.js';
diff --git a/__fixtures__/remote-view-fake-cdn/react@17.0.2.js b/__fixtures__/remote-view-fake-cdn/react@17.0.2.js
@@ -0,0 +1,3 @@
+/* esm.sh - react@17.0.2 */
+export * from 'http://localhost:8484/stable/react@17.0.2/es2022/react.js';
+export { default } from 'http://localhost:8484/stable/react@17.0.2/es2022/react.js';