@colixsystems/widget-sdk 0.55.0 → 0.57.0

package/README.md

@@ -52,11 +52,19 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.55.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.57.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.57.0
+
+**A `required: true` `tableRef` must ship a matching `datastoreTemplate` table (sc-2791).** A widget property that the author cannot skip — a `tableRef` you mark `required: true` — must have a table to bind on install, or the end user has nothing to pick and the widget can't load its data. The marketplace analyzer now enforces this at publish: the check `manifest.requiredTableRefsHaveTemplate` rejects a manifest whose `datastoreTemplate.tables` count is fewer than its `required` `tableRef` property count, naming the offending properties. Two ways to clear it: seed a `datastoreTemplate` table for each required `tableRef` (the default — the widget owns its data), OR make the property **optional** when it binds a table the app already owns (shared data the user names). This tightens the existing "always ship a `datastoreTemplate` for a data widget" guidance into an enforced rule for the `required` case. No export, type, or hook changed shape — additive publish-gate + documentation. `CONTRACT` is unchanged (no new field).
 
 ### What's new in 0.55.0
 
-**Dynamic record selection for `valueRef` (sc-2327).** The `valueRef` binding gains an optional `mode` field: `"static"` (the default — pin a specific `recordId`, the only prior behaviour) or `"latest"` (resolve the most recently created row live, sorting on the host-managed `created_at` descending with `limit: 1`; `recordId` is ignored). The built-in Field Value widget reads it to offer a "Latest entry" that updates as records are added, with no per-host code — the same baked widget source and the same injected `@colixsystems/datastore-client` run on the web Player and the native Expo export. The `ValueRefBinding` type adds `mode?: "static" | "latest"`. Existing bindings carry no `mode` and read as static. `CONTRACT.version` → `1.39.0`. Additive — no existing field changed shape.
+**Dynamic record selection for `valueRef` (sc-2327).** The `valueRef` binding gains an optional `mode` field: `"static"` (the default — pin a specific `recordId`, the only prior behaviour) or `"latest"` (resolve the most recently created row live, sorting on the host-managed `created_at` descending with `limit: 1`; `recordId` is ignored). The built-in Data Value widget reads it to offer a "Latest entry" that updates as records are added, with no per-host code — the same baked widget source and the same injected `@colixsystems/datastore-client` run on the web Player and the native Expo export. The `ValueRefBinding` type adds `mode?: "static" | "latest"`. Existing bindings carry no `mode` and read as static. `CONTRACT.version` → `1.39.0`. Additive — no existing field changed shape.
+
+### What's new in 0.56.0
+
+**New linter rule `react-not-imported` — widget source must be self-contained (sc-2353).** The automatic JSX runtime binds `jsx`/`jsxs` from `react/jsx-runtime` but never `React` itself, so source that reaches for the bare `React` global (`React.createElement` / `React.Fragment` / `React.memo` / `React.useMemo`) without importing it bundles cleanly, then throws `ReferenceError: React is not defined` the moment a non-initial code path hits the reference. The platform does **not** inject a `React` binding — earlier behaviour that auto-injected one left source that broke as soon as it was downloaded and re-uploaded through a path that doesn't inject. The linter now flags a bare-`React` reference with no `import React from "react"` (or `import * as React`) as an error, so the failure becomes a publish/upload finding (and an AI-agent repair-loop finding) instead of a broken shipped widget. Plain JSX, which needs no React import, is never flagged; a `React` mention inside a comment or string is masked. Author fix: add `import React from "react";` (`react` is already vetted), or prefer a JSX fragment `<>…</>` plus the SDK hooks/primitives over reaching for `React` directly. `CONTRACT` is unchanged (no new field).
 
 ### What's new in 0.54.0
 
@@ -123,7 +131,7 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ### What's new in 0.42.0
 
-**RELATION columns hydrate with a display label (sc-1181).** Record reads now return `{ id, label }` for ONE_TO_ONE / ONE_TO_MANY and `[{ id, label }, ...]` for MANY_TO_MANY (empty array when no links) — `label` is the value of the column pointed at by the new optional `display_column_id` on `DatastoreSchemaColumn`, or, when unset, the first STRING/TEXT column on the target table. Widgets should render `record.<rel>.label` (or `record.<rel>.map(r => r.label).join(", ")` for M:M) directly; `.id` is still there for the foreign-key case. The cell-formatting helpers in the built-in `DataList` and `FieldValue` widgets already walk arrays and prefer `label` over `name` / `id` — author widgets that need the same can copy that pattern. `CONTRACT.version` is unchanged.
+**RELATION columns hydrate with a display label (sc-1181).** Record reads now return `{ id, label }` for ONE_TO_ONE / ONE_TO_MANY and `[{ id, label }, ...]` for MANY_TO_MANY (empty array when no links) — `label` is the value of the column pointed at by the new optional `display_column_id` on `DatastoreSchemaColumn`, or, when unset, the first STRING/TEXT column on the target table. Widgets should render `record.<rel>.label` (or `record.<rel>.map(r => r.label).join(", ")` for M:M) directly; `.id` is still there for the foreign-key case. The cell-formatting helpers in the built-in `DataList` and `DataValue` widgets already walk arrays and prefer `label` over `name` / `id` — author widgets that need the same can copy that pattern. `CONTRACT.version` is unchanged.
 
 ### What's new in 0.41.0
 
@@ -250,10 +258,10 @@ Also: `useFileSignatures(fileIds)` is now **self-scoped** (the caller's own sign
 
 **New `valueRef` propertySchema type — bind a widget to a single value in the datastore (REQ-WDG-VALUEREF).**
 
-- **`valueRef`** is a composite picker: the Studio Properties Panel renders three cascading dropdowns — pick a **table**, then a **record**, then a **column** — and the bound widget resolves the one cell. It is the discoverable replacement for hand-typing a `tableRef` + a raw record-id `string` + a `columnRef` separately (the old Field Value shape).
+- **`valueRef`** is a composite picker: the Studio Properties Panel renders three cascading dropdowns — pick a **table**, then a **record**, then a **column** — and the bound widget resolves the one cell. It is the discoverable replacement for hand-typing a `tableRef` + a raw record-id `string` + a `columnRef` separately (the old Data Value shape).
 - **Persisted value is an object** `{ tableId, recordId, column }` (new `ValueRefBinding` type), unlike every other ref type, which is a bare string. A widget reads it with `useDatastoreRecord(value.tableId, value.recordId)` then `record[value.column]`; any missing piece means "no value".
 - **tenant-copy** remaps `tableId` to the copied table and **nulls `recordId`** (records are business data and are never copied), so a copied workspace shows the widget's fallback until the new operator re-picks a record. `column` (a name) is preserved verbatim.
-- The built-in **Field Value** widget now uses `valueRef` (back-compatible: already-saved Field Value widgets that stored `tableId`/`recordId`/`column` as separate props keep rendering).
+- The built-in **Data Value** widget now uses `valueRef` (back-compatible: already-saved Data Value widgets that stored `tableId`/`recordId`/`column` as separate props keep rendering).
 - **`CONTRACT.version` → `1.12.0`** (additive: one new optional propertySchema type). No existing export or type changed signature.
 
 ### What's new in 0.21.1
@@ -330,6 +338,7 @@ The "split-implementation + vetted package list" pivot.
 - **`fetch` and `XMLHttpRequest` come off `CONTRACT.bannedApis`.** Widgets may call third-party APIs directly. Calls to the host's own `/api/*` surface will 401 because the JWT token is never shared with widget code; the linter emits a soft `no-host-api-url` warning when it sees host-URL substrings so authors learn the rule statically. Use SDK hooks (`useDatastoreQuery`, `useUsers`, `useAsset`, …) for workspace data; use `axios` / `fetch` for third-party APIs.
 - **`import-not-vetted` linter rule (new).** Every bare `import` specifier is validated against `CONTRACT.vettedImports`. Relative imports inside the bundle (`./shared.js`) are allowed so split-impl widgets can share helpers; `../` and absolute paths are rejected.
 - **`import-platform-mismatch` linter rule (new).** A single-source widget that imports a native-only package while `manifest.supportedPlatforms` includes `"web"` fails the lint. The author either drops the platform from the manifest OR ships a `widget.web.jsx` + `widget.native.jsx` pair where the platform-specific import lives in the file that targets its platform.
+- **`react-not-imported` linter rule (new).** Widget source must be self-contained: a reference to the bare `React` global (`React.createElement` / `React.Fragment` / `React.memo` / …) with no `import React from "react"` (or `import * as React`) fails the lint — it would throw `ReferenceError: React is not defined` at render. Plain JSX needs no React import and is never flagged. Add the import, or prefer a JSX fragment `<>…</>` plus the SDK hooks/primitives.
 - **Lint findings carry `severity`.** `"error"` (default) blocks publish; `"warning"` (currently only `no-host-api-url`) surfaces to reviewers without blocking. The `lintSource(...)` return shape stays `{ ok, findings }` — `ok` is true iff no error-severity findings exist.
 - **Four Tier A SDK additions:**
   - `<Icon>` primitive — `<Icon name="check" size={16} color={theme.colors.primary} />`. Wraps `lucide-react-native`; works on both platforms.

package/dist/contract.cjs

@@ -1862,7 +1862,7 @@ const CONTRACT = deepFreeze({
   //    an optional `mode` field: "static" (a pinned recordId, the default and
   //    the only prior behaviour) or "latest" (the most recently created row,
   //    resolved live by `created_at` desc with limit 1; recordId ignored). The
-  //    Field Value widget reads it to show a live "latest entry". Existing
+  //    Data Value widget reads it to show a live "latest entry". Existing
   //    bindings have no `mode` and read as static — additive, minor bump.
   version: "1.39.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,

package/dist/contract.js

@@ -1862,7 +1862,7 @@ const CONTRACT = deepFreeze({
   //    an optional `mode` field: "static" (a pinned recordId, the default and
   //    the only prior behaviour) or "latest" (the most recently created row,
   //    resolved live by `created_at` desc with limit 1; recordId ignored). The
-  //    Field Value widget reads it to show a live "latest entry". Existing
+  //    Data Value widget reads it to show a live "latest entry". Existing
   //    bindings have no `mode` and read as static — additive, minor bump.
   version: "1.39.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,

package/dist/linter.cjs

@@ -594,6 +594,46 @@ function _lucideIconRules(source) {
   return findings;
 }
 
+// sc-2353 — widget source must be self-contained. The automatic JSX runtime
+// binds jsx/jsxs from react/jsx-runtime but never `React` itself, so a widget
+// that reaches for the bare `React` global (React.createElement / React.Fragment
+// / React.memo / React.useMemo) without importing it renders fine until a
+// non-initial code path hits the reference, then throws "React is not defined".
+// The platform does NOT inject a React binding — require an explicit
+// `import React from "react"` (or `import * as React`) whenever the source
+// references React, so the bundle is self-contained on both hosts and survives
+// a download → re-upload round-trip. Plain JSX needs no React import.
+const _REACT_DEFAULT_IMPORT_RE = /\bimport\s+(?:React\b|\*\s+as\s+React\b)/;
+const _REACT_MEMBER_USE_RE = /\bReact\s*\./;
+function _reactInScopeRules(source) {
+  const findings = [];
+  const code = _stripNonCode(source);
+  if (!_REACT_MEMBER_USE_RE.test(code)) return findings;
+  if (_REACT_DEFAULT_IMPORT_RE.test(code)) return findings;
+  const codeLines = code.split(/\r?\n/);
+  const sourceLines = source.split(/\r?\n/);
+  let line = 0;
+  for (let i = 0; i < codeLines.length; i += 1) {
+    if (_REACT_MEMBER_USE_RE.test(codeLines[i])) {
+      line = i + 1;
+      break;
+    }
+  }
+  findings.push({
+    rule: "react-not-imported",
+    severity: "error",
+    label:
+      "source references the `React` global (e.g. React.createElement / " +
+      "React.Fragment) but never imports it — widget source must be " +
+      'self-contained. Add `import React from "react";` at the top, or drop ' +
+      "the bare `React` reference in favour of a JSX fragment `<>…</>` and the " +
+      "SDK hooks (useState / useMemo / …) and primitives (View / Text / …).",
+    line,
+    snippet: (sourceLines[line - 1] || "").trim().slice(0, 200),
+  });
+  return findings;
+}
+
 // Narrow a split-impl widget's manifest to the platform a single bundle file
 // ships to, so `import-platform-mismatch` lints each file against what it
 // actually targets. Mirror of linter.js.
@@ -653,6 +693,7 @@ function lintSource(source, options) {
   );
   findings.push(..._hostApiUrlRules(source));
   findings.push(..._lucideIconRules(source));
+  findings.push(..._reactInScopeRules(source));
   findings.push(
     ..._scopeRules(source, options && options.manifest).map((f) => ({
       ...f,

package/dist/linter.js

@@ -683,6 +683,46 @@ function _lucideIconRules(source) {
   return findings;
 }
 
+// sc-2353 — widget source must be self-contained. The automatic JSX runtime
+// binds jsx/jsxs from react/jsx-runtime but never `React` itself, so a widget
+// that reaches for the bare `React` global (React.createElement / React.Fragment
+// / React.memo / React.useMemo) without importing it renders fine until a
+// non-initial code path hits the reference, then throws "React is not defined".
+// The platform does NOT inject a React binding — require an explicit
+// `import React from "react"` (or `import * as React`) whenever the source
+// references React, so the bundle is self-contained on both hosts and survives
+// a download → re-upload round-trip. Plain JSX needs no React import.
+const _REACT_DEFAULT_IMPORT_RE = /\bimport\s+(?:React\b|\*\s+as\s+React\b)/;
+const _REACT_MEMBER_USE_RE = /\bReact\s*\./;
+function _reactInScopeRules(source) {
+  const findings = [];
+  const code = _stripNonCode(source);
+  if (!_REACT_MEMBER_USE_RE.test(code)) return findings;
+  if (_REACT_DEFAULT_IMPORT_RE.test(code)) return findings;
+  const codeLines = code.split(/\r?\n/);
+  const sourceLines = source.split(/\r?\n/);
+  let line = 0;
+  for (let i = 0; i < codeLines.length; i += 1) {
+    if (_REACT_MEMBER_USE_RE.test(codeLines[i])) {
+      line = i + 1;
+      break;
+    }
+  }
+  findings.push({
+    rule: "react-not-imported",
+    severity: "error",
+    label:
+      "source references the `React` global (e.g. React.createElement / " +
+      "React.Fragment) but never imports it — widget source must be " +
+      'self-contained. Add `import React from "react";` at the top, or drop ' +
+      "the bare `React` reference in favour of a JSX fragment `<>…</>` and the " +
+      "SDK hooks (useState / useMemo / …) and primitives (View / Text / …).",
+    line,
+    snippet: (sourceLines[line - 1] || "").trim().slice(0, 200),
+  });
+  return findings;
+}
+
 /**
  * Narrow a split-impl widget's manifest to the platform a single bundle file
  * ships to, so `import-platform-mismatch` lints each file against what it
@@ -748,6 +788,8 @@ export function lintSource(source, options) {
   // REQ-WSDK-PLATFORM §3.5: soft host-API URL warning (does not block).
   findings.push(..._hostApiUrlRules(source));
   findings.push(..._lucideIconRules(source));
+  // sc-2353 — widget source must be self-contained (reference React ⇒ import it).
+  findings.push(..._reactInScopeRules(source));
   // REQ-USERMGMT / REQ-ACL-SYS M3 — scope-aware rules. Run after the
   // line-by-line scan so banned-identifier findings stay first in the
   // output.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,7 +42,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.js",
-    "test": "node --test src/__tests__/contract.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-subscription.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/devserver.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js"
+    "test": "node --test src/__tests__/contract.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-subscription.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/linter-platform.test.js src/__tests__/linter-react-import.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/devserver.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js"
   },
   "engines": {
     "node": ">=18"