[ivette] sandboxing

ivette/.gitignore

@@ -13,6 +13,7 @@ yarn-error.log
 /dist
 /doc/html
 /src/renderer/loader.ts
+/src/renderer/sandbox.ts
 /src/dome/doc/guides/icons.md
 /Makefile.plugins
 

ivette/CONTRIBUTING.md

@@ -54,6 +54,10 @@ Useful extensions:
 - `ESlint` provides support for lint errors and warnings;
 - `ES7 React/Redux/GraphQL/React-Native snippets` provides boilerplate snippets;
 
+# Sandboxing
+
+It is possible to add visual tests and playgrounds inside `src/sandbox` directory.
+Please read the associated [src/sandbox/README.md](src/sandbox/README.md) instructions.
 
 # Coding rules
 

ivette/Makefile

@@ -65,19 +65,29 @@ tsc: dome-pkg dome-templ
 # --------------------------------------------------------------------------
 
 LOADER=src/renderer/loader.ts
+SANDBOX=src/renderer/sandbox.ts
 PACKAGES=$(shell find src -name "pkg.json")
+SANDBOXES=$(shell find src/sandbox -name "*.tsx")
 
 lint: pkg
 dome-pkg: pkg
 dome-app: pkg
 dome-dev: pkg
 dome-dist: pkg
-pkg: $(LOADER)
+
+pkg: $(LOADER) $(SANDBOX)
+
 $(LOADER): $(PACKAGES) ./configure.js ./Makefile
-	@rm -f $(LOADER)
+	@rm -f $@
 	@echo "[Ivette] configure packages"
-	@node ./configure.js $(LOADER) $(PACKAGES)
-	@chmod -f a-w $(LOADER)
+	@node ./configure.js $@ $(PACKAGES)
+	@chmod -f a-w $@
+
+$(SANDBOX): $(SANDBOXES) ./sandboxer.js ./Makefile
+	@rm -f $@
+	@echo "[Ivette] configure sandboxes"
+	@node ./sandboxer.js $@ $(SANDBOXES)
+	@chmod -f a-w $@
 
 # --------------------------------------------------------------------------
 # --- Frama-C Source Distrib

ivette/sandboxer.js

+// --------------------------------------------------------------------------
+// --- Configure Sandboxes
+// --- Called by [make pkg]
+// --------------------------------------------------------------------------
+
+const path = require('path');
+const fs = require('fs');
+
+const loader = process.argv[2];
+const inputFiles = process.argv.slice(3);
+let buffer = '// Ivette Sandboxes Loader (generated)\n';
+
+inputFiles.forEach((file) => {
+  try {
+    const box = path.relative('./src',file);
+    console.log(`[Ivette] sandbox ${box}`);
+    buffer += `import '../${box}';\n`;
+  } catch(err) {
+    console.error(`[Dome] Error ${file}: ${err}`);
+    process.exit(1);
+  }
+});
+
+fs.writeFileSync(loader, buffer);

ivette/src/ivette/index.tsx

@@ -36,7 +36,6 @@ import { DefineElement } from 'dome/layout/dispatch';
 import { GridItem, GridHbox, GridVbox } from 'dome/layout/grids';
 import * as Lab from 'ivette@lab';
 import * as Ext from 'ivette@ext';
-import Sandbox from './sandbox';
 
 /* --------------------------------------------------------------------------*/
 /* --- Items                                                              ---*/
@@ -205,12 +204,22 @@ export function registerStatusbar(status: ToolProps): void {
 /* --------------------------------------------------------------------------*/
 
 if (DEVEL) {
-  registerComponent({
-    id: 'ivette.sandbox',
+  registerGroup({
+    id: 'sandbox',
     label: 'Sandbox',
-    title: 'Ivette Sandbox Component (only in DEVEL mode)',
-    children: <Sandbox />,
+    title: 'Ivette Sandbox Components (only in DEVEL mode)',
   });
+  registerView({
+    id: 'sandbox',
+    rank: -2,
+    label: 'Sandbox',
+    title: 'Sandbox Playground (only in DEVEL mode)',
+    layout: [],
+  });
+}
+
+export function registerSandbox(props: ComponentProps): void {
+  if (DEVEL) registerComponent({ ...props, group: 'sandbox' });
 }
 
 // --------------------------------------------------------------------------

ivette/src/renderer/Application.tsx

@@ -37,6 +37,7 @@ import * as Extensions from './Extensions';
 import * as Laboratory from './Laboratory';
 import * as IvettePrefs from 'ivette/prefs';
 import './loader';
+import './sandbox';
 
 // --------------------------------------------------------------------------
 // --- Main View

ivette/src/sandbox/README.md

+# Sandboxed Components
+
+This directory is for Sandboxed components.
+Sandboxed components are only visible in DEV mode (make dev).
+
+The playground view « Sandbox » is also only visible in DEV mode and can be used to
+play with sandboxed components _or_ any other component of the platform.
+
+All files with `*.tsx` extension inside this directory will be automatically loaded
+and shall register sandboxe(s) by using typically:
+
+    Ivette.registerSandbox({
+        id: 'sandbox.<ident>',
+        label: 'My New Feature',
+        title: 'Testing this new amazing feature',
+        chidren: <MyNewFeature />,
+    })
+
+Enjoy Sandboxing !

ivette/src/ivette/sandbox.tsx → ivette/src/sandbox/qsplit.tsx

@@ -31,6 +31,7 @@ import * as Ctrl from 'dome/controls/buttons';
 import * as Disp from 'dome/controls/displays';
 import * as Box from 'dome/layout/boxes';
 import { QSplit, QPane } from 'dome/layout/qsplit';
+import { registerSandbox } from 'ivette';
 
 function Quarter(props: {
   value?: string,
@@ -64,7 +65,7 @@ function Pane(props: { id: string, background: string }): JSX.Element {
 
 const round = (r: number): number => Math.round(r * 100) / 100;
 
-export default function Sandbox(): JSX.Element {
+function QSplitSandbox(): JSX.Element {
   const [H, setH] = React.useState(0.5);
   const [V, setV] = React.useState(0.5);
   const [A, setA] = React.useState<string | undefined>('A');
@@ -113,3 +114,15 @@ export default function Sandbox(): JSX.Element {
     </Box.Vfill >
   );
 }
+
+/* -------------------------------------------------------------------------- */
+/* --- Sandbox                                                            --- */
+/* -------------------------------------------------------------------------- */
+
+registerSandbox({
+  id: 'sandbox.qsplit',
+  label: 'Q-Splitters',
+  children: <QSplitSandbox />,
+});
+
+/* -------------------------------------------------------------------------- */