⛏️ display svgio features only on env var

.env

@@ -0,0 +1 @@
+REACT_APP_ENABLE_SVG_IO=true

build.mjs

@@ -16,6 +16,7 @@ const buildOptions = {
   loader: { '.svg': 'file' },
   define: {
     IS_WEB: process.env.IS_WEB ?? '0',
+    REACT_APP_ENABLE_SVG_IO: process.env.REACT_APP_ENABLE_SVG_IO ?? 'false',
   },
   plugins: [ inlineWorker(),
     html({

package.json

@@ -23,7 +23,7 @@
     "lint": "eslint --cache --ext .ts,.tsx src && eslint --format stylish --fix src",
     "build": "npm run build:server && npm run build:ui",
     "build:server": "tsc",
-    "build:ui": "node --experimental-modules build.mjs",
+    "build:ui": "node --experimental-modules -r dotenv/config build.mjs",
     "prepare": "rimraf dist && npm run build",
     "start": "npm run build && node cli.js",
     "dev": "BUILD_MODE=development npm start",
@@ -67,6 +67,7 @@
   },
   "dependencies": {
     "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
     "express": "^4.17.9",
     "flatten-svg": "^0.3.0",
     "optimize-paths": "^1.2.2",

src/global.d.ts

@@ -23,3 +23,4 @@ declare module 'flatten-svg' {
 }
 
 declare const IS_WEB: boolean
+declare const REACT_APP_ENABLE_SVG_IO: boolean;

src/ui.tsx

@@ -72,9 +72,9 @@ function reducer(state: State, action: any): State {
     case "SET_PLAN_OPTION":
       return { ...state, planOptions: { ...state.planOptions, ...action.value } };
     case "SET_VISUALIZATION_OPTION":
-      return {...state, visualizationOptions: {...state.visualizationOptions, ...action.value }};
+      return { ...state, visualizationOptions: { ...state.visualizationOptions, ...action.value } };
     case "SET_SVGIO_OPTION":
-      return {...state, svgIoOptions: {...state.svgIoOptions, ...action.value }}
+      return { ...state, svgIoOptions: { ...state.svgIoOptions, ...action.value } }
     case "SET_DEVICE_INFO":
       return { ...state, deviceInfo: action.value };
     case "SET_PAUSED":
@@ -334,7 +334,7 @@ class SaxiDriver implements Driver {
     fetch("/plot", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: new Blob([ JSON.stringify(plan.serialize()) ], { type: 'application/json' })
+      body: new Blob([JSON.stringify(plan.serialize())], { type: 'application/json' })
     });
   }
 
@@ -658,7 +658,7 @@ function PaperConfig({ state }: { state: State }) {
               if (Number(value) < 0) { (e.target as HTMLInputElement).value = "270"; }
               if (Number(value) > 270) { (e.target as HTMLInputElement).value = "0"; }
             }}
-            onChange={(e) => dispatch({ type: "SET_PLAN_OPTION", value: { rotateDrawing: e.target.value } })}/>
+            onChange={(e) => dispatch({ type: "SET_PLAN_OPTION", value: { rotateDrawing: e.target.value } })} />
         </div>
       </label>
     </div>
@@ -1271,12 +1271,14 @@ function Root() {
             <VisualizationOptions state={state} />
           </div>
         </details>
-        <details>
-          <summary className="section-header">AI</summary>
-          <div className="section-body">
-            <SvgIoOptions state={state} />
-          </div>
-        </details>
+        {REACT_APP_ENABLE_SVG_IO
+          ? <details>
+            <summary className="section-header">AI</summary>
+            <div className="section-body">
+              <SvgIoOptions state={state} />
+            </div>
+          </details>
+          : ''}
         <div className="spacer" />
         <div className="control-panel-bottom">
           <div className="section-header">plot</div>