babel-plugin-mapples-sid 0.2.0-beta.9 → 0.2.0

package/README.md

@@ -1,7 +1,14 @@
 # babel-plugin-mapples-sid
 
-Strips the Mapples tooling JSX props (`$sid`, `$fallback`) from **production** bundles and keeps
-them in development (enables tap-element → select-in-Creator).
+Two jobs for a Mapples-synced Expo app:
+
+- **Runs Creator behaviour.** An element carrying Creator sidecars (`$data` bindings, `$actions`,
+  `$refs`) is rendered through `MapplesElement` from `@mapples/app`
+  (`<Button $actions={…} />` → `<MapplesElement $as={Button} $actions={…} />`), which resolves them
+  the way the Creator canvas does — variables, API responses, navigation, set-variable and request
+  actions. The source file keeps the attributes the two-way sync reads.
+- **Strips tooling props.** `$sid` and `$fallback` are removed from **production** bundles and kept
+  in development (enables tap-element → select-in-Creator).
 
 ```js
 // babel.config.js

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import type { PluginObj } from '@babel/core';
+import type { PluginObj, types as BabelTypes } from '@babel/core';
 export interface MapplesSidPluginOptions {
     /**
      * Force strip/keep regardless of NODE_ENV. When absent, the plugin strips
@@ -6,13 +6,22 @@ export interface MapplesSidPluginOptions {
      */
     strip?: boolean;
 }
+type T = typeof BabelTypes;
 /**
  * babel-plugin-mapples-sid
  *
- * Removes the Mapples tooling JSX attributes from production bundles. In
- * development they are kept so runtime tooling (tap element -> select in
- * Creator) can resolve elements back to canvas nodes.
+ * 1. Rewrites every element that carries Creator behaviour —
+ *    `<Button $actions={…} label="Go" />` — into
+ *    `<MapplesElement $as={Button} $actions={…} label="Go" />`, so the
+ *    bindings, actions and asset references a synced file declares run in
+ *    the app. The source file keeps the attributes the two-way sync reads.
+ * 2. Removes the tooling attributes (`$sid`, `$fallback`) from production
+ *    bundles. In development they are kept so runtime tooling (tap element
+ *    -> select in Creator) can resolve elements back to canvas nodes.
  */
-export default function mapplesSidPlugin(): PluginObj<{
+export default function mapplesSidPlugin({ types: t }: {
+    types: T;
+}): PluginObj<{
     opts: MapplesSidPluginOptions;
 }>;
+export {};

package/dist/index.js

@@ -2,21 +2,75 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = mapplesSidPlugin;
 /**
- * The Mapples tooling props: `$sid` (canvas node id), `$fallback` (Custom node
- * size) and the canvas sidecars `$refs` / `$data` / `$actions`.
+ * The Mapples tooling props: `$sid` (canvas node id) and `$fallback` (Custom
+ * node size). Tooling only — stripped from production bundles.
  */
-const TOOLING_PROPS = new Set(['$sid', '$fallback', '$refs', '$data', '$actions']);
+const TOOLING_PROPS = new Set(['$sid', '$fallback']);
+/**
+ * The Creator behaviour sidecars — data bindings, actions, asset references.
+ * They are the app's behaviour, never stripped: an element carrying one is
+ * rendered through `MapplesElement` (@mapples/app), which resolves them the
+ * way the canvas does.
+ */
+const BEHAVIOUR_PROPS = new Set(['$data', '$actions', '$refs']);
+/** Where the element wrapper comes from — every exported app depends on it. */
+const RUNTIME_MODULE = '@mapples/app';
+const RUNTIME_EXPORT = 'MapplesElement';
+function tagExpression(t, name) {
+    if (t.isJSXIdentifier(name))
+        return t.identifier(name.name);
+    if (t.isJSXMemberExpression(name)) {
+        return t.memberExpression(tagExpression(t, name.object), t.identifier(name.property.name));
+    }
+    throw new Error(`babel-plugin-mapples-sid: cannot wrap <${name.namespace.name}:${name.name.name}>`);
+}
+function hasBehaviour(t, element) {
+    return element.attributes.some((attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && BEHAVIOUR_PROPS.has(attr.name.name));
+}
 /**
  * babel-plugin-mapples-sid
  *
- * Removes the Mapples tooling JSX attributes from production bundles. In
- * development they are kept so runtime tooling (tap element -> select in
- * Creator) can resolve elements back to canvas nodes.
+ * 1. Rewrites every element that carries Creator behaviour —
+ *    `<Button $actions={…} label="Go" />` — into
+ *    `<MapplesElement $as={Button} $actions={…} label="Go" />`, so the
+ *    bindings, actions and asset references a synced file declares run in
+ *    the app. The source file keeps the attributes the two-way sync reads.
+ * 2. Removes the tooling attributes (`$sid`, `$fallback`) from production
+ *    bundles. In development they are kept so runtime tooling (tap element
+ *    -> select in Creator) can resolve elements back to canvas nodes.
  */
-function mapplesSidPlugin() {
+function mapplesSidPlugin({ types: t }) {
     return {
         name: 'mapples-sid',
         visitor: {
+            Program: {
+                // Rewritten on entry, before any other plugin (the JSX transform,
+                // the module transform) sees the file, so the added import is an
+                // ordinary one to them.
+                enter(program) {
+                    let local = null;
+                    program.traverse({
+                        JSXElement(path) {
+                            const opening = path.node.openingElement;
+                            if (!hasBehaviour(t, opening))
+                                return;
+                            // Intrinsic (lowercase) tags have no component to hand over.
+                            if (t.isJSXIdentifier(opening.name) && /^[a-z]/.test(opening.name.name))
+                                return;
+                            local ??= program.scope.generateUidIdentifier(RUNTIME_EXPORT);
+                            const as = t.jsxAttribute(t.jsxIdentifier('$as'), t.jsxExpressionContainer(tagExpression(t, opening.name)));
+                            opening.name = t.jsxIdentifier(local.name);
+                            opening.attributes.unshift(as);
+                            if (path.node.closingElement) {
+                                path.node.closingElement.name = t.jsxIdentifier(local.name);
+                            }
+                        },
+                    });
+                    if (!local)
+                        return;
+                    program.unshiftContainer('body', t.importDeclaration([t.importSpecifier(local, t.identifier(RUNTIME_EXPORT))], t.stringLiteral(RUNTIME_MODULE)));
+                },
+            },
             JSXAttribute(path, state) {
                 const shouldStrip = state.opts.strip ?? process.env.NODE_ENV === 'production';
                 if (!shouldStrip)

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAuBA,mCAgBC;AA7BD;;;GAGG;AACH,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;AAEnF;;;;;;GAMG;AACH,SAAwB,gBAAgB;IAGtC,OAAO;QACL,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE;YACP,YAAY,CAAC,IAAI,EAAE,KAAK;gBACtB,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,CAAC;gBAC9E,IAAI,CAAC,WAAW;oBAAE,OAAO;gBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC5B,IAAI,IAAI,CAAC,IAAI,KAAK,eAAe,IAAI,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;oBAClE,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,CAAC;YACH,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-mapples-sid",
-  "version": "0.2.0-beta.9",
+  "version": "0.2.0",
   "description": "Strips $sid props from production bundles; keeps them in dev for tap-to-select.",
   "license": "MIT",
   "author": "Oleksandr Soloviov <oleksolv@gmail.com>",