Better dynamic import handling

Author: CarlosNZ

demo/package.json

@@ -40,8 +40,11 @@
   "scripts": {
     "serve": "vite preview",
     "type-check": "tsc --noEmit",
-    "start": "rimraf ./src/json-edit-react && mkdir ./src/json-edit-react && mkdir ./src/json-edit-react/src && concurrently --kill-others-on-fail  \"vite\" \"nodemon watch.cjs\"",
-    "build": "tsc && vite build",
+    "prepareLaunch": "rimraf ./src/json-edit-react && mkdir ./src/json-edit-react && mkdir ./src/json-edit-react/src && node src/imports/swap_import.cjs",
+    "launch": "concurrently --kill-others-on-fail  \"vite\" \"nodemon watch.cjs\"",
+    "start": "yarn prepareLaunch && yarn launch",
+    "dev": "cross-env VITE_USE_LOCAL_SRC=true yarn prepareLaunch && VITE_USE_LOCAL_SRC=true yarn launch",
+    "build": "node src/imports/swap_import.cjs && tsc && vite build",
     "prebuild": "node ./scripts/getVersion.cjs",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d build"
@@ -74,6 +77,7 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
     "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
     "gh-pages": "^6.1.1",
     "node-fetch": "^3.3.2",
     "nodemon": "^3.0.3",

demo/src/App.tsx

@@ -18,7 +18,8 @@ import {
   psychedelicTheme,
   // ExternalTriggers,
   // type CollapseState
-} from './_imports'
+} from './imports'
+import SourceIndicator from './SourceIndicator'
 import { FaNpm, FaExternalLinkAlt, FaGithub } from 'react-icons/fa'
 import { BiReset } from 'react-icons/bi'
 import { AiOutlineCloudUpload } from 'react-icons/ai'
@@ -58,6 +59,8 @@ import { timestamp, version } from './version'
 
 const CodeEditor = lazy(() => import('./CodeEditor'))
 
+const usingLocalImport = import.meta.env.VITE_USE_LOCAL_SRC === 'true'
+
 interface AppState {
   rootName: string
   indent: number
@@ -289,6 +292,7 @@ function App() {
         minH="100%"
       >
         <HStack w="100%" justify="space-between" align="flex-start">
+          {usingLocalImport && <SourceIndicator />}
           <VStack align="flex-start" gap={3}>
             <HStack align="flex-end" mt={2} gap={4} flexWrap="wrap">
               <Flex gap={4} align="center">

demo/src/CodeEditor.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import { json } from '@codemirror/lang-json'
-import { TextEditorProps } from './_imports'
+import { TextEditorProps } from './imports'
 import { githubLight, githubDark } from '@uiw/codemirror-theme-github'
 import { consoleDark } from '@uiw/codemirror-theme-console/dark'
 import { consoleLight } from '@uiw/codemirror-theme-console/light'

demo/src/SourceIndicator.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 const SourceIndicator = () => {
   // Directly check if we're using the local source
   if (import.meta.env.VITE_USE_LOCAL_SRC !== 'true') return null

demo/src/_imports.ts

@@ -11,7 +11,7 @@
 import React from 'react'
 import DatePicker from 'react-datepicker'
 import { Button } from '@chakra-ui/react'
-import { CustomNodeProps, CustomNodeDefinition } from '../_imports'
+import { CustomNodeProps, CustomNodeDefinition } from '../imports'
 
 // Styles
 import 'react-datepicker/dist/react-datepicker.css'

demo/src/customComponents/DateTimePicker.tsx

@@ -12,7 +12,7 @@ import {
   StringDisplay,
   StringEdit,
   toPathString,
-} from '../_imports'
+} from '../imports'
 import {
   DefaultValueFunction,
   ErrorString,

demo/src/demoData/dataDefinitions.tsx

@@ -0,0 +1 @@
+export * from '../json-edit-react/src'

demo/src/imports/import.local.ts

@@ -0,0 +1 @@
+export * from 'json-edit-react'

demo/src/imports/import.package.ts

@@ -0,0 +1 @@
+export * from '../json-edit-react/src'