grid: dynamically load desk, ship

pkg/grid/package-lock.json

@@ -3813,6 +3813,11 @@
       "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
       "dev": true
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "mousetrap": {
       "version": "1.6.5",
       "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
@@ -5295,6 +5300,12 @@
         "rollup": "^2.38.5"
       }
     },
+    "vite-plugin-html-config": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/vite-plugin-html-config/-/vite-plugin-html-config-1.0.5.tgz",
+      "integrity": "sha512-2v/nLbpFUofCsa19tw/ZcsqautjV2bBpYZH44ysxN2M1QXrnpYLgJhDUE918rKGsN0gTQ0Ej48luTaj5akTM7Q==",
+      "dev": true
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

pkg/grid/package.json

@@ -18,14 +18,15 @@
     "@radix-ui/react-dropdown-menu": "^0.0.23",
     "@radix-ui/react-polymorphic": "^0.0.13",
     "@radix-ui/react-portal": "^0.0.15",
-    "@urbit/http-api": "^1.3.1",
     "@urbit/api": "^1.4.0",
+    "@urbit/http-api": "^1.3.1",
     "classnames": "^2.3.1",
     "clipboard-copy": "^4.0.1",
     "color2k": "^1.2.4",
     "fuzzy": "^0.1.3",
     "immer": "^9.0.5",
     "lodash-es": "^4.17.21",
+    "moment": "^2.29.1",
     "mousetrap": "^1.6.5",
     "postcss-import": "^14.0.2",
     "query-string": "^7.0.1",
@@ -65,7 +66,8 @@
     "tailwindcss": "^2.2.7",
     "tailwindcss-touch": "^1.0.1",
     "typescript": "^4.3.2",
-    "vite": "^2.4.4"
+    "vite": "^2.4.4",
+    "vite-plugin-html-config": "^1.0.5"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

pkg/grid/src/nav/search/TreatyInfo.tsx

@@ -29,62 +29,7 @@ export const TreatyInfo = () => {
       </div>
     );
   }
-  return <AppInfo className="dialog-inner-container" docket={vat ? charge : treaty} vat={vat} />;
-
-  /*
   return (
-
-    <div className="dialog-inner-container text-black">
-      <DocketHeader docket={treaty}>
-        <div className="col-span-2 md:col-span-1 flex items-center space-x-4">
-          {installed && (
-            <PillButton
-              variant="alt-primary"
-              as="a"
-              href={getAppHref(treaty.href)}
-              target={treaty.title || '_blank'}
-              onClick={() => addRecentApp(treaty)}
-            >
-              Open App
-            </PillButton>
-          )}
-          {!installed && (
-            <Dialog>
-              <DialogTrigger as={PillButton} variant="alt-primary">
-                {installing ? (
-                  <>
-                    <Spinner />
-                    <span className="sr-only">Installing...</span>
-                  </>
-                ) : (
-                  'Get App'
-                )}
-              </DialogTrigger>
-              <DialogContent showClose={false} className="max-w-[400px] space-y-6">
-                <h2 className="h4">Install &ldquo;{treaty.title}&rdquo;</h2>
-                <p className="text-base tracking-tight pr-6">
-                  This application will be able to view and interact with the contents of your
-                  Urbit. Only install if you trust the developer.
-                </p>
-                <div className="flex space-x-6">
-                  <DialogClose as={Button} variant="secondary">
-                    Cancel
-                  </DialogClose>
-                  <DialogClose as={Button} onClick={installApp}>
-                    Get &ldquo;{treaty.title}&rdquo;
-                  </DialogClose>
-                </div>
-              </DialogContent>
-            </Dialog>
-          )}
-          <PillButton variant="alt-secondary" onClick={copyApp}>
-            Copy App Link
-          </PillButton>
-        </div>
-      </DocketHeader>
-      <hr className="-mx-5 sm:-mx-8" />
-      <TreatyMeta treaty={treaty} />
-    </div>
+    <AppInfo className="dialog-inner-container" docket={!!charge ? charge : treaty} vat={vat} />
   );
-   */
 };

pkg/grid/src/pages/Grid.tsx

@@ -37,7 +37,7 @@ export const Grid: FunctionComponent<GridProps> = ({ match }) => {
         {chargesLoaded && (
           <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 px-4 md:px-8 w-full max-w-6xl">
             {charges &&
-              map(omit(charges, 'grid'), (charge, desk) => (
+              map(omit(charges, window.desk), (charge, desk) => (
                 <Tile key={desk} charge={charge} desk={desk} />
               ))}
           </div>

pkg/grid/src/state/api.ts

@@ -8,14 +8,15 @@ declare global {
 
 const api =
   import.meta.env.MODE === 'mock'
-    ? {
+    ? ({
         poke: async () => {},
         subscribe: async () => {},
         subscribeOnce: async () => {},
         ship: '',
         scry: async () => {}
-      } as unknown as Urbit
+      } as unknown as Urbit)
     : new Urbit('', '');
 
-api.ship = 'dopmet';
+api.ship = import.meta.env.MODE === 'mock' ? 'dopzod' : window.ship;
+
 export default api;

pkg/grid/src/window.ts

@@ -0,0 +1,8 @@
+declare global {
+  interface Window {
+    ship: string;
+    desk: string;
+  }
+}
+
+export {};

pkg/grid/vite.config.ts

@@ -2,6 +2,12 @@ import { defineConfig } from 'vite';
 import analyze from 'rollup-plugin-analyzer';
 import { visualizer } from 'rollup-plugin-visualizer';
 import reactRefresh from '@vitejs/plugin-react-refresh';
+import htmlPlugin from 'vite-plugin-html-config';
+
+const htmlPluginOpt = {
+  headScripts: [{ src: '/apps/grid/desk.js' }, { src: '/session.js' }]
+};
+const SHIP_URL = process.env.SHIP_URL || 'http://localhost:8080';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -11,8 +17,11 @@ export default defineConfig(({ mode }) => ({
       ? undefined
       : {
           proxy: {
+            '^/apps/grid/desk.js': {
+              target: SHIP_URL
+            },
             '^((?!/apps/grid).)*$': {
-              target: 'http://localhost:8083'
+              target: SHIP_URL
             }
           }
         },
@@ -29,5 +38,5 @@ export default defineConfig(({ mode }) => ({
             ]
           }
         },
-  plugins: [reactRefresh()]
+  plugins: [htmlPlugin(htmlPluginOpt), reactRefresh()]
 }));