fully new build approach

mcnuttandrew · Jul 14, 2023 · e0717a2 · e0717a2
1 parent 1e4d93f
commit e0717a2
Show file tree

Hide file tree

Showing 12 changed files with 881 additions and 636 deletions.
diff --git a/packages/prong-editor/package.json b/packages/prong-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prong-editor",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "scripts": {
     "dev": " vite build --watch --config vite.config.ts",
     "build": "tsc && vite build",
@@ -46,18 +46,16 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "jest": "^29.6.1",
-    "json-schema": "^0.4.0",
-    "prettier": "^3.0.0",
-    "typescript": "^5.1.6",
     "ts-jest": "^29.1.1",
+    "typescript": "^4.5.5",
     "vite": "^2.7.13",
     "vite-jest": "^0.1.4",
     "vite-plugin-dts": "^0.9.9"
   },
   "license": "MIT",
   "peerDependencies": {
-    "react": "17.x",
-    "react-dom": "7.x"
+    "react": "^16.8.0 || 17.x",
+    "react-dom": "^16.8.0 || 17.x"
   },
   "files": [
     "dist"
@@ -74,4 +72,4 @@
       "require": "./dist/style.css"
     }
   }
-}
+}
diff --git a/packages/prong-editor/src/lib/dock.tsx b/packages/prong-editor/src/lib/dock.tsx
@@ -71,7 +71,7 @@ function Content(props: {
             <div>
               <b>Menu</b>
             </div>
-            <div>Click the circle to drag and place this menu!!!</div>
+            <div>Click the circle to drag and place this menu</div>
             <div>
               Press CMD+. to reattach the menu
               {setDock && (

diff --git a/packages/prong-editor/src/lib/popover-menu/PopoverMenuElement.tsx b/packages/prong-editor/src/lib/popover-menu/PopoverMenuElement.tsx
@@ -15,6 +15,7 @@ type MenuElementRenderer<T> = (props: {
   parentGroup: MenuRow;
 }) => JSX.Element;
 
+const MarkDownMask = ReactMarkdown as any;
 const DisplayElement: MenuElementRenderer<any> = (props) => {
   const isLintError = props.parentGroup.label === "Lint error";
   return (
@@ -26,7 +27,7 @@ const DisplayElement: MenuElementRenderer<any> = (props) => {
       })}
       style={isLintError ? { color: "red" } : {}}
     >
-      <ReactMarkdown>{props.menuElement.content.trim()}</ReactMarkdown>
+      <MarkDownMask>{props.menuElement.content.trim()}</MarkDownMask>
     </div>
   );
 };

diff --git a/packages/prong-editor/src/lib/popover-menu/PopoverState.ts b/packages/prong-editor/src/lib/popover-menu/PopoverState.ts
@@ -40,8 +40,8 @@ export interface PopoverMenuState {
   hasProjectionContent: boolean;
 }
 export const popoverMenuState: PopoverMenuState = {
-  menuState: "preFirstUse",
-  // menuState: "hardClosed",
+  // menuState: "preFirstUse",
+  menuState: "hardClosed",
   targetNode: null,
   highlightNode: null,
   targetedTypings: [],

diff --git a/packages/prong-editor/yarn.lock b/packages/prong-editor/yarn.lock
@@ -1866,9 +1866,9 @@ dom-accessibility-api@^0.5.6:
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
 electron-to-chromium@^1.4.431:
-  version "1.4.459"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.459.tgz#25a23370f4ae8aaa8f77aaf00133aa4994f4148e"
-  integrity sha512-XXRS5NFv8nCrBL74Rm3qhJjA2VCsRFx0OjHKBMPI0otij56aun8UWiKTDABmd5/7GTR021pA4wivs+Ri6XCElg==
+  version "1.4.460"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.460.tgz#f360a5059c039c4a5fb4dfa99680ad8129dd9f84"
+  integrity sha512-kKiHnbrHME7z8E6AYaw0ehyxY5+hdaRmeUbjBO22LZMdqTYCO29EvF0T1cQ3pJ1RN5fyMcHl1Lmcsdt9WWJpJQ==
 
 emittery@^0.13.1:
   version "0.13.1"
@@ -3613,9 +3613,9 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
     find-up "^4.0.0"
 
 postcss@^8.4.13:
-  version "8.4.25"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.25.tgz#4a133f5e379eda7f61e906c3b1aaa9b81292726f"
-  integrity sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==
+  version "8.4.26"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.26.tgz#1bc62ab19f8e1e5463d98cf74af39702a00a9e94"
+  integrity sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"

diff --git a/sites/docs/package.json b/sites/docs/package.json
@@ -1,12 +1,9 @@
 {
-  "name": "new-docs",
+  "name": "prong-docs",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "post-build": "npm run prep-data-prod && npm run cp-quiets && npm run cp-docs",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "cp-quiets": "cp ./src/examples/Quiet* ./public/",
@@ -15,7 +12,7 @@
     "prep-data": "rm -rf public/data && mkdir public/data && cp ./node_modules/vega-datasets/data/* ./public/data/"
   },
   "dependencies": {
-    "@codemirror/lang-javascript": "^6.1.9",
+    "@codemirror/lang-javascript": "^6.1.4",
     "@codemirror/lang-json": "^6.0.1",
     "@json-schema-tools/traverse": "^1.10.1",
     "codemirror": "^6.0.1",
@@ -31,23 +28,26 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
-    "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.14.1",
+    "react-markdown": "^7.1.0",
+    "react-router": "^6.4.2",
+    "react-router-dom": "^6.4.2",
     "react-syntax-highlighter": "^15.5.0",
     "react-vega": "^7.6.0",
     "seedrandom": "^3.0.5",
-    "typescript": "^5.1.6",
     "vega": "^5.25.0",
     "vega-datasets": "^2.7.0",
     "vega-expression": "^5.1.0",
     "vega-lite": "^5.13.0",
     "vega-themes": "^2.13.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
     "@types/d3": "^7.4.0",
     "@types/friendly-words": "^1.2.0",
     "@types/json-schema": "^7.0.12",
     "@types/lodash.merge": "^4.6.7",
+    "@types/node": "^12.0.0",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-syntax-highlighter": "^15.5.7",
@@ -58,7 +58,7 @@
     "eslint": "^8.44.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
-    "prettier": "^3.0.0",
+    "typescript": "^5.0.2",
     "vite": "^4.4.0"
   }
-}
+}
diff --git a/sites/docs/scripts/do-build.sh b/sites/docs/scripts/do-build.sh
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+yarn
+
+# prep assets
+mkdir -p dist/data 
+rm -rf dist/data
+mkdir dist/data 
+cp ./node_modules/vega-datasets/data/* ./dist/data/
+cp ./src/examples/Quiet* ./public/
+cp ../../README.md ./public/
+
+# swap to using the published version of prong edtior
+npx tsc &&
+yarn add prong-editor &&
+npx vite build &&
+yarn remove prong-editor
diff --git a/sites/docs/src/App.tsx b/sites/docs/src/App.tsx
@@ -2,8 +2,9 @@ import { useEffect, useState } from "react";
 
 import { HashRouter, Route, Routes, Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
-// import '../../../prong-editor/style.css'
-// import '../../../packages/prong-editor/src'
+
+
+import '../../../packages/prong-editor/src/styles.css'
 
 import "./App.css";
 import VegaLiteExampleApp from "./examples/VegaLiteDebug";
@@ -139,6 +140,7 @@ function App() {
     <HashRouter>
       <div className="flex proot">
         <div className="link-container">
+          {/* @ts-ignore */}
           <Link to={"/"}>
             <div className="hero">
               <img
@@ -154,14 +156,17 @@ function App() {
                 <h3 className="">{name}</h3>
                 {groupRoutes.map(({ name }) => (
                   <div key={name}>
+                    {/* @ts-ignore */}
                     <Link to={name}>{name}</Link>
                   </div>
                 ))}
               </div>
             );
           })}
+          {/* @ts-ignore */}
           <Routes>
             {routes.map(({ name, explanation }) => (
+              //@ts-ignore
               <Route
                 element={<Explanation explanation={explanation} />}
                 path={name}
@@ -170,10 +175,13 @@ function App() {
             ))}
           </Routes>
         </div>
+        {/* @ts-ignore */}
         <Routes>
           {routes.map(({ name, Component }) => (
+            // @ts-ignore
             <Route element={<Component />} path={name} key={name} />
           ))}
+          {/* @ts-ignore */}
           <Route element={<Root />} path="/" />
         </Routes>
       </div>

diff --git a/sites/docs/src/examples/ProduceExample.tsx b/sites/docs/src/examples/ProduceExample.tsx
@@ -51,25 +51,18 @@ const HideMeta: Projection = {
 
 function ProduceExample() {
   const [currentCode, setCurrentCode] = useState(produceExample);
-  const [numRows, setNumRows] = useState(0);
 
   return (
-    <div>
-      {[...new Array(numRows)].map(() => (
-        <h1>ha ha fruit</h1>
-      ))}
-      <Editor
-        schema={produceSchema}
-        code={currentCode}
-        onChange={(x) => setCurrentCode(x)}
-        projections={[
-          ...Object.values(StandardBundle),
-          DestringProjection,
-          HideMeta,
-        ]}
-      />
-      <button onClick={() => setNumRows(numRows + 1)}>Add row</button>
-    </div>
+    <Editor
+      schema={produceSchema}
+      code={currentCode}
+      onChange={(x) => setCurrentCode(x)}
+      projections={[
+        ...Object.values(StandardBundle),
+        DestringProjection,
+        HideMeta,
+      ]}
+    />
   );
 }
 

diff --git a/sites/docs/src/main.tsx b/sites/docs/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import App from "./App";
 
 ReactDOM.render(
+  // @ts-ignore
   <React.StrictMode>
     <App />
   </React.StrictMode>,

diff --git a/sites/docs/vite.config.ts b/sites/docs/vite.config.ts
@@ -1,7 +1,35 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 
-// https://vitejs.dev/config/
+// for production builds swap to using the published version of prong editor, rather than the local one
+function myPlugin() {
+  return {
+    name: "transform-file",
+
+    transform(src, id) {
+      if (
+        process.env.NODE_ENV === 'production' && 
+        id.includes("sites/docs") &&
+        !id.includes("node_modules") &&
+        (id.endsWith(".ts") || id.endsWith(".tsx"))
+      ) {
+
+        return {
+          code: src.replaceAll(
+            "../../../../packages/prong-editor/src/index",
+            "prong-editor"
+          ).replaceAll(
+            "../../../packages/prong-editor/src/styles.css", 
+            "prong-editor/style.css"
+          ),
+          map: null,
+        };
+      }
+
+    },
+  };
+}
+
 export default defineConfig({
-  plugins: [react()],
+  plugins: [myPlugin(), react({})],
 });