@_linked/cli 1.13.0 → 1.14.0

package/defaults/app-react-native/apps/mobile/__tests__/integration/personOverview.test.tsx

@@ -0,0 +1,51 @@
+// The example PersonOverview screen with the real BackendAPIStore and real fetch, against the API started by
+// globalSetup on the reset app-test dataset: list 0, add (1), edit (the name changes and persists), delete (0).
+import '@_linked/react/native';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+
+import { PersonOverview } from '../../src/components/PersonOverview';
+import { API_URL } from './apiEnv';
+
+// env.ts resolves the API URL from Expo's config; point it at the test API. (jest.mock is hoisted above imports.)
+jest.mock('expo-constants', () => ({
+  __esModule: true,
+  default: { expoConfig: { extra: { apiUrl: 'http://localhost:4100', apiPort: 4000 } } },
+}));
+
+const WAIT = { timeout: 10000 };
+
+describe('PersonOverview against the API', () => {
+  it('uses the test API and a real fetch', () => {
+    expect(process.env.SITE_ROOT).toBe(API_URL);
+    // Node's fetch, not jest-expo's stubbed expo/fetch (see nodeFetchEnvironment.js).
+    expect(globalThis.fetch).toBe((globalThis as any).__NODE_FETCH_GLOBALS__.fetch);
+  });
+
+  it('lists 0, adds one (1), edits it, deletes it (0)', async () => {
+    await render(<PersonOverview />);
+    await waitFor(() => expect(screen.getByTestId('person-empty')).toBeOnTheScreen(), WAIT);
+
+    // Add
+    await fireEvent.changeText(screen.getByTestId('person-add-given'), 'Ada');
+    await fireEvent.changeText(screen.getByTestId('person-add-family'), 'Lovelace');
+    await fireEvent.press(screen.getByTestId('person-add'));
+    await waitFor(() => expect(screen.getAllByTestId('person-row')).toHaveLength(1), WAIT);
+    await waitFor(() => expect(screen.getByTestId('person-name')).toHaveTextContent('Ada Lovelace'), WAIT);
+
+    // Edit
+    await fireEvent.press(screen.getByTestId('person-edit-button'));
+    await fireEvent.changeText(screen.getByTestId('person-edit-given'), 'Grace');
+    await fireEvent.press(screen.getByTestId('person-save'));
+    await waitFor(() => expect(screen.getByTestId('person-name')).toHaveTextContent('Grace Lovelace'), WAIT);
+
+    // The edit is stored, not only patched locally: a fresh mount reads it back from the API.
+    await screen.unmount();
+    await render(<PersonOverview />);
+    await waitFor(() => expect(screen.getByTestId('person-name')).toHaveTextContent('Grace Lovelace'), WAIT);
+
+    // Delete
+    await fireEvent.press(screen.getByTestId('person-delete'));
+    await waitFor(() => expect(screen.getByTestId('person-empty')).toBeOnTheScreen(), WAIT);
+    expect(screen.queryAllByTestId('person-row')).toHaveLength(0);
+  });
+});

package/defaults/app-react-native/apps/mobile/__tests__/integration/restoreNodeFetch.ts

@@ -0,0 +1,8 @@
+// Runs after the setup files: installs expo's winter runtime first (it swaps in a stubbed `expo/fetch`), then
+// restores Node's fetch globals saved by nodeFetchEnvironment.js, so BackendAPIStore reaches the real API.
+require('expo');
+
+const saved: Record<string, unknown> = (globalThis as any).__NODE_FETCH_GLOBALS__;
+for (const [name, value] of Object.entries(saved)) {
+  Object.defineProperty(globalThis, name, { value, configurable: true, writable: true, enumerable: true });
+}

package/defaults/app-react-native/apps/mobile/__tests__/{linkedDefaults.test.tsx → nativeDefaults.test.tsx}

@@ -1,12 +1,10 @@
-// Asserts the cause of the React Native crash in @_linked/react's default loader and error
-// elements: they render DOM host elements (<svg>), which have no native view config.
-// Removing the import below must make both tests fail with Received: ["svg", ...].
-import '../src/shell/linkedDefaults';
-
+// Asserts the cause of the React Native crash in @_linked/react's root loader and error elements: they render
+// DOM host elements (<svg>), which have no native view config. @_linked/react/native replaces them on import;
+// importing linkedComponent from the root barrel instead must make both tests fail with Received: ["svg", ...].
 import { act, render, screen } from '@testing-library/react-native';
 import { LinkedStorage } from '@_linked/core/utils/LinkedStorage';
 import { setQueryDispatch } from '@_linked/core/queries/queryDispatch';
-import { linkedComponent } from '@_linked/react';
+import { linkedComponent } from '@_linked/react/native';
 import { Text } from 'react-native';
 import { Example } from 'app-shapes';
 
@@ -44,7 +42,7 @@ function lowercaseHostTypes(tree: Node | Node[] | null): string[] {
 
 const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
 
-describe('Linked render defaults on React Native', () => {
+describe('@_linked/react/native render defaults', () => {
   test('a loading component renders only React Native elements', async () => {
     mode = 'loading';
     await render(<ExampleLabel of={{ id: 'urn:example:1' }} />);

package/defaults/app-react-native/apps/mobile/__tests__/storage.test.ts

@@ -0,0 +1,24 @@
+// Importing storage alone must be enough: it pulls ./env, so SITE_ROOT is set before BackendAPIStore is constructed.
+jest.mock('expo-constants', () => ({
+  __esModule: true,
+  default: { expoConfig: { extra: { apiUrl: 'http://api.test:9000', apiPort: 4000 } } },
+}));
+
+const constructedWith: (string | undefined)[] = [];
+jest.mock('@_linked/server/shapes/quadstores/BackendAPIStore', () => ({
+  BackendAPIStore: class {
+    constructor() {
+      constructedWith.push(process.env.SITE_ROOT);
+    }
+  },
+}));
+
+test('importing src/shell/storage sets SITE_ROOT before BackendAPIStore is constructed', () => {
+  delete process.env.SITE_ROOT;
+  delete process.env.DATA_ROOT;
+
+  require('../src/shell/storage');
+
+  expect(constructedWith).toEqual(['http://api.test:9000']);
+  expect(process.env.DATA_ROOT).toBe('http://api.test:9000/data');
+});

package/defaults/app-react-native/apps/mobile/__tests__/stripJsonImportAttributes.test.ts

@@ -0,0 +1,45 @@
+import { transformSync } from '@babel/core';
+
+import stripJsonImportAttributes from '../babel/stripJsonImportAttributes';
+
+const transform = (code: string, withPlugin = true, parserOpts: Record<string, unknown> = {}) =>
+  transformSync(code, {
+    babelrc: false,
+    configFile: false,
+    parserOpts,
+    plugins: withPlugin ? [stripJsonImportAttributes] : [],
+  })!.code;
+
+// The plugin must produce exactly what Babel prints without it.
+const expectUnchanged = (code: string) => expect(transform(code)).toBe(transform(code, false));
+
+describe('stripJsonImportAttributes', () => {
+  test('drops the options of a dynamic JSON import', () => {
+    expect(transform("import('./a.json', { with: { type: 'json' } });")).toBe("import('./a.json');");
+  });
+
+  test('handles a template literal specifier', () => {
+    expect(transform("import(`./a.json`, { with: { type: 'json' } });")).toBe('import(`./a.json`);');
+  });
+
+  test('handles ImportExpression nodes (createImportExpressions)', () => {
+    const code = "import('./a.json', { with: { type: 'json' } });";
+    expect(transform(code, true, { createImportExpressions: true })).toBe("import('./a.json');");
+  });
+
+  test('leaves a non-JSON dynamic import unchanged', () => {
+    expectUnchanged("import('./a.js', { x: 1 });");
+    expect(transform("import('./a.js', { x: 1 });")).toContain('x: 1');
+  });
+
+  test('leaves a non-literal specifier unchanged', () => {
+    expectUnchanged("import(variable, { with: { type: 'json' } });");
+    expect(transform("import(variable, { with: { type: 'json' } });")).toContain("type: 'json'");
+  });
+
+  test('leaves a static JSON import with attributes unchanged', () => {
+    const code = "import d from './d.json' with { type: 'json' };";
+    expectUnchanged(code);
+    expect(transform(code)).toContain("with { type: 'json' }");
+  });
+});

package/defaults/app-react-native/apps/mobile/app.config.ts

@@ -0,0 +1,21 @@
+import type { ConfigContext, ExpoConfig } from 'expo/config';
+
+// The default API port lives in src/shell/apiPort.json (services/api/.env.example PORT), shared with env.ts. JSON,
+// because Expo's config loader cannot import a TypeScript module.
+import { defaultApiPort } from './src/shell/apiPort.json';
+
+// src/shell/env.ts combines the API port with the dev machine's host when EXPO_PUBLIC_API_URL is not set, so the
+// Simulator and a device on the LAN both work.
+const API_PORT = defaultApiPort;
+
+// The static app identity (name, slug, bundle identifier) stays in app.json; Expo passes it in as `config`.
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: config.name ?? 'App',
+  slug: config.slug ?? 'app',
+  extra: {
+    ...config.extra,
+    apiUrl: process.env.EXPO_PUBLIC_API_URL ?? null,
+    apiPort: API_PORT,
+  },
+});

package/defaults/app-react-native/apps/mobile/babel/stripJsonImportAttributes.js

@@ -0,0 +1,41 @@
+/**
+ * Babel plugin: drop import attributes from dynamic `import()` of JSON files.
+ *
+ * Linked ontology packages load their data with
+ *   import('../data/x.json', { with: { type: 'json' } })
+ * Node requires the attribute for JSON, so the packages keep it. Metro's dependency collector rejects any
+ * `import()` with more than one argument ("Invalid call at line N"). This plugin removes the options argument
+ * when the specifier is a static string ending in `.json`, so Metro bundles it as an ordinary async JSON module.
+ * Everything else, including static `import x from './a.json' with { type: 'json' }`, is left untouched.
+ */
+
+function staticSpecifier(node) {
+  if (!node) return null;
+  if (node.type === 'StringLiteral') return node.value;
+  if (node.type === 'TemplateLiteral' && node.expressions.length === 0) return node.quasis[0].value.cooked;
+  return null;
+}
+
+const isJson = (specifier) => typeof specifier === 'string' && /\.json$/i.test(specifier);
+
+module.exports = function stripJsonImportAttributes() {
+  return {
+    name: 'strip-json-import-attributes',
+    visitor: {
+      // Default parser output (what Metro and babel-preset-expo use): `import(...)` is a CallExpression with an
+      // `Import` callee.
+      CallExpression(path) {
+        const { callee, arguments: args } = path.node;
+        if (callee.type !== 'Import' || args.length < 2) return;
+        if (!isJson(staticSpecifier(args[0]))) return;
+        path.node.arguments = [args[0]];
+      },
+      // With the parser option `createImportExpressions`, it is an ImportExpression with `source` and `options`.
+      ImportExpression(path) {
+        const { node } = path;
+        if (!node.options || !isJson(staticSpecifier(node.source))) return;
+        node.options = null;
+      },
+    },
+  };
+};

package/defaults/app-react-native/apps/mobile/babel.config.js

@@ -0,0 +1,13 @@
+// Metro passes this file as `extends` for every module it transforms, node_modules included (so @_linked/*), and
+// Jest (jest-expo) picks it up too. No root babel.config.js is needed: Metro's Babel root is apps/mobile.
+module.exports = function (api) {
+  // Cached for the process lifetime and in Metro's transform cache: after editing this file (or the plugin),
+  // restart with `npx expo start --clear`.
+  api.cache(true);
+  return {
+    // babel-preset-expo is installed nested under expo; resolve it from there, as Expo's own default config does.
+    presets: [require.resolve('babel-preset-expo', { paths: [require.resolve('expo/package.json')] })],
+    // Metro rejects `import('x.json', { with: { type: 'json' } })`, used by every Linked ontology package.
+    plugins: [require.resolve('./babel/stripJsonImportAttributes')],
+  };
+};

package/defaults/app-react-native/apps/mobile/jest.integration.config.js

@@ -0,0 +1,16 @@
+// Round-trip tests against a real API and Fuseki: `npm run fuseki:up && npm run test:integration`.
+// Same preset, transforms and module mapping as the unit config in package.json. jest-expo replaces the global
+// fetch with a stubbed `expo/fetch` that never sends a request (it is not a jest mock), so the environment saves
+// Node's fetch and restoreNodeFetch.ts reinstates it.
+const { jest: unitConfig } = require('./package.json');
+
+module.exports = {
+  ...unitConfig,
+  testMatch: ['<rootDir>/__tests__/integration/**/*.test.[jt]s?(x)'],
+  testPathIgnorePatterns: ['/node_modules/'],
+  testEnvironment: '<rootDir>/__tests__/integration/nodeFetchEnvironment.js',
+  setupFilesAfterEnv: ['<rootDir>/__tests__/integration/restoreNodeFetch.ts'],
+  globalSetup: '<rootDir>/__tests__/integration/globalSetup.ts',
+  globalTeardown: '<rootDir>/__tests__/integration/globalTeardown.ts',
+  testTimeout: 30000,
+};

package/defaults/app-react-native/apps/mobile/package.json

@@ -7,13 +7,17 @@
     "start": "expo start",
     "ios": "expo run:ios",
     "android": "expo run:android",
-    "test": "jest"
+    "test": "jest",
+    "test:integration": "jest -c jest.integration.config.js --runInBand"
   },
   "dependencies": {
-    "@_linked/core": "2.18.0",
-    "@_linked/react": "1.4.2",
+    "@_linked/core": "2.18.1",
+    "@_linked/react": "1.5.0",
+    "@_linked/schema": "1.1.2",
+    "@_linked/server": "2.3.0",
     "app-shapes": "*",
     "expo": "57.0.22",
+    "expo-constants": "57.0.18",
     "expo-dev-client": "57.0.19",
     "react": "19.2.3",
     "react-native": "0.86.3"
@@ -30,6 +34,10 @@
   },
   "jest": {
     "preset": "jest-expo",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/__tests__/integration/"
+    ],
     "transformIgnorePatterns": [
       "node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@_linked/.*|app-shapes))"
     ],

package/defaults/app-react-native/apps/mobile/src/components/PersonOverview.tsx

@@ -0,0 +1,123 @@
+// Example PersonOverview — demonstrates @_linked/react's data binding:
+// linkedSetComponent for the list (auto-runs the query, injects results and
+// an injected _refresh); linkedComponent for each row (see PersonPreview).
+// After Person.create the form calls _refresh() to re-run the list query.
+// A React Native port of the web app-template's example (linked-cm/app-template).
+//
+// `linkedSetComponent` checks LinkedStorage when this module loads, so storage is imported first.
+// Replace or extend this with your own shapes (see https://linked.cm).
+import '../shell/storage';
+
+import React, { useCallback, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { linkedSetComponent } from '@_linked/react';
+import { Person } from '@_linked/schema/shapes/Person';
+import { PersonPreview } from './PersonPreview';
+import { PersonListRefreshProvider } from './PersonOverviewContext';
+
+const PersonList = linkedSetComponent(
+  Person.select((p) => [p.givenName, p.familyName]),
+  ({ linkedData = [], _refresh, refreshRef }: any) => {
+    // Forward the list's _refresh up via a ref so the sibling form +
+    // child rows can trigger a re-fetch through context.
+    if (refreshRef) {
+      refreshRef.current = _refresh;
+    }
+
+    if (linkedData.length === 0) {
+      return (
+        <Text style={styles.empty} testID="person-empty">
+          No people yet. Add one below.
+        </Text>
+      );
+    }
+
+    return (
+      <View style={styles.list} testID="person-list">
+        {linkedData.map((p: { id: string }) => (
+          <PersonPreview key={p.id} of={{ id: p.id }} />
+        ))}
+      </View>
+    );
+  },
+);
+
+function PersonAddForm({ onAdded }: { onAdded: () => void }) {
+  const [given, setGiven] = useState('');
+  const [family, setFamily] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    if (!given && !family) return;
+    setBusy(true);
+    try {
+      await Person.create({ givenName: given, familyName: family });
+      setGiven('');
+      setFamily('');
+      onAdded();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <View style={styles.form}>
+      <TextInput
+        style={styles.input}
+        value={given}
+        placeholder="First name"
+        onChangeText={setGiven}
+        testID="person-add-given"
+      />
+      <TextInput
+        style={styles.input}
+        value={family}
+        placeholder="Last name"
+        onChangeText={setFamily}
+        testID="person-add-family"
+      />
+      <Pressable style={styles.button} onPress={submit} disabled={busy} testID="person-add">
+        <Text style={styles.buttonText}>Add</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+export function PersonOverview() {
+  const refreshRef = useRef<() => void>(() => {});
+  const refresh = useCallback(() => refreshRef.current(), []);
+
+  return (
+    <PersonListRefreshProvider value={refresh}>
+      <View style={styles.root} testID="person-overview">
+        <Text style={styles.title}>People</Text>
+        <Text style={styles.intro}>
+          Example code using the @_linked query DSL against your local Fuseki dataset. Edit
+          src/components/PersonOverview.tsx to extend it.
+        </Text>
+        <PersonList refreshRef={refreshRef} />
+        <PersonAddForm onAdded={refresh} />
+      </View>
+    </PersonListRefreshProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { alignSelf: 'stretch', padding: 16, gap: 12 },
+  title: { fontSize: 22, fontWeight: '600' },
+  intro: { color: '#555' },
+  empty: { color: '#888', fontStyle: 'italic' },
+  list: { gap: 8 },
+  form: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, alignItems: 'center' },
+  input: {
+    flexGrow: 1,
+    minWidth: 100,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
+  button: { backgroundColor: '#222', borderRadius: 6, paddingHorizontal: 14, paddingVertical: 8 },
+  buttonText: { color: '#fff', fontWeight: '600' },
+});

package/defaults/app-react-native/apps/mobile/src/components/PersonOverviewContext.tsx

@@ -0,0 +1,12 @@
+// Small context that lets PersonPreview rows trigger a list refresh on
+// their parent PersonOverview without prop-drilling through the
+// linkedSetComponent's wrapped renderer.
+import React, { useContext } from 'react';
+
+const PersonListRefreshContext = React.createContext<() => void>(() => {});
+
+export const PersonListRefreshProvider = PersonListRefreshContext.Provider;
+
+export function usePersonListRefresh(): () => void {
+  return useContext(PersonListRefreshContext);
+}

package/defaults/app-react-native/apps/mobile/src/components/PersonPreview.tsx

@@ -0,0 +1,135 @@
+// Example PersonPreview — single-Person row. Demonstrates @_linked/react's
+// linkedComponent: the wrapper runs the per-row query and injects query
+// result keys + `source` + `_refresh` into the render function. _refresh
+// patches local query state for optimistic UI; on delete, the parent
+// list re-runs via the PersonListRefresh context.
+// A React Native port of the web app-template's example (linked-cm/app-template).
+// Storage is imported first, so the row's queries go to the API store however this module is reached.
+import '../shell/storage';
+
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { linkedComponent } from '@_linked/react';
+import { Person } from '@_linked/schema/shapes/Person';
+import { usePersonListRefresh } from './PersonOverviewContext';
+
+export const PersonPreview = linkedComponent(
+  Person.select((p) => [p.givenName, p.familyName]),
+  ({ givenName, familyName, source, _refresh }) => {
+    const refreshList = usePersonListRefresh();
+    const [editing, setEditing] = useState(false);
+    const [draftGiven, setDraftGiven] = useState(givenName ?? '');
+    const [draftFamily, setDraftFamily] = useState(familyName ?? '');
+    const [busy, setBusy] = useState(false);
+
+    async function save() {
+      if (!source.id) return;
+      setBusy(true);
+      try {
+        await Person.update({
+          givenName: draftGiven,
+          familyName: draftFamily,
+        }).for({ id: source.id });
+        // Optimistic patch — no extra network round-trip needed.
+        _refresh({ givenName: draftGiven, familyName: draftFamily });
+        setEditing(false);
+      } finally {
+        setBusy(false);
+      }
+    }
+
+    async function remove() {
+      if (!source.id) return;
+      setBusy(true);
+      try {
+        await Person.delete({ id: source.id });
+        refreshList();
+      } finally {
+        setBusy(false);
+      }
+    }
+
+    function startEdit() {
+      setDraftGiven(givenName ?? '');
+      setDraftFamily(familyName ?? '');
+      setEditing(true);
+    }
+
+    if (editing) {
+      return (
+        <View style={styles.row} testID="person-edit">
+          <TextInput
+            style={styles.input}
+            value={draftGiven}
+            onChangeText={setDraftGiven}
+            accessibilityLabel="First name"
+            testID="person-edit-given"
+          />
+          <TextInput
+            style={styles.input}
+            value={draftFamily}
+            onChangeText={setDraftFamily}
+            accessibilityLabel="Last name"
+            testID="person-edit-family"
+          />
+          <Pressable style={styles.button} onPress={save} disabled={busy} testID="person-save">
+            <Text style={styles.buttonText}>Save</Text>
+          </Pressable>
+          <Pressable
+            style={[styles.button, styles.secondary]}
+            onPress={() => setEditing(false)}
+            disabled={busy}
+            testID="person-cancel"
+          >
+            <Text>Cancel</Text>
+          </Pressable>
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.row} testID="person-row">
+        <Text style={styles.name} testID="person-name">
+          {givenName} {familyName}
+        </Text>
+        <View style={styles.actions}>
+          <Pressable
+            style={[styles.button, styles.secondary]}
+            onPress={startEdit}
+            disabled={busy}
+            testID="person-edit-button"
+          >
+            <Text>Edit</Text>
+          </Pressable>
+          <Pressable
+            style={[styles.button, styles.danger]}
+            onPress={remove}
+            disabled={busy}
+            testID="person-delete"
+          >
+            <Text style={styles.buttonText}>Delete</Text>
+          </Pressable>
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 8 },
+  name: { flexGrow: 1, fontSize: 16 },
+  actions: { flexDirection: 'row', gap: 8 },
+  input: {
+    flexGrow: 1,
+    minWidth: 90,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
+  button: { backgroundColor: '#222', borderRadius: 6, paddingHorizontal: 12, paddingVertical: 6 },
+  buttonText: { color: '#fff', fontWeight: '600' },
+  secondary: { backgroundColor: '#eee' },
+  danger: { backgroundColor: '#b3261e' },
+});

package/defaults/app-react-native/apps/mobile/src/shell/apiPort.json

@@ -0,0 +1 @@
+{ "defaultApiPort": 4000 }

package/defaults/app-react-native/apps/mobile/src/shell/env.ts

@@ -0,0 +1,30 @@
+// Resolves the API URL and exposes it to @_linked/server's BackendAPIStore, which reads process.env.SITE_ROOT and
+// DATA_ROOT at runtime. ./storage imports this module, so the variables are set before the store is constructed.
+import Constants from 'expo-constants';
+
+import { defaultApiPort } from './apiPort.json';
+
+export type ApiUrlInput = {
+  // `unknown`: the dev-client manifest serializes `apiUrl: null` from app.config.ts as `{}`.
+  extra?: { apiUrl?: unknown; apiPort?: number } | null;
+  hostUri?: string | null;
+};
+
+/**
+ * `extra.apiUrl` (EXPO_PUBLIC_API_URL) if it is a non-empty string; otherwise the dev machine's host from Expo's
+ * `hostUri` (`192.168.1.5:8081`) with the API port; otherwise localhost.
+ */
+export function resolveApiUrl({ extra, hostUri }: ApiUrlInput): string {
+  if (typeof extra?.apiUrl === 'string' && extra.apiUrl) return extra.apiUrl;
+  const port = extra?.apiPort ?? defaultApiPort;
+  const host = hostUri ? hostUri.split(':')[0] : '';
+  return `http://${host || 'localhost'}:${port}`;
+}
+
+export const apiUrl: string = resolveApiUrl({
+  extra: Constants.expoConfig?.extra as ApiUrlInput['extra'],
+  hostUri: Constants.expoConfig?.hostUri,
+});
+
+process.env.SITE_ROOT = apiUrl;
+process.env.DATA_ROOT = `${apiUrl}/data`;

package/defaults/app-react-native/apps/mobile/src/shell/storage.ts

@@ -0,0 +1,9 @@
+// Sends every Linked query to the API (services/api). Import @_linked/server by subpath only: the root barrel
+// pulls express, webpack and react-dom.
+// ./env comes first: BackendAPIStore's server proxy reads SITE_ROOT once.
+import './env';
+
+import { LinkedStorage } from '@_linked/core/utils/LinkedStorage';
+import { BackendAPIStore } from '@_linked/server/shapes/quadstores/BackendAPIStore';
+
+LinkedStorage.setDefaultDataset(new BackendAPIStore({ name: 'appData' }));

package/defaults/app-react-native/docker-compose.yml

@@ -0,0 +1,22 @@
+# Local Fuseki for services/api. Same pinned image as @_linked/core.
+# `npm run fuseki:up` starts it and waits for the healthcheck; `npm run fuseki:down` stops it (data persists).
+services:
+  fuseki:
+    image: secoresearch/fuseki:5.5.0
+    ports:
+      # Override the host port when 3030 is taken (another project's Fuseki); set FUSEKI_BASE_URL to match.
+      - "${FUSEKI_PORT:-3030}:3030"
+    environment:
+      - ADMIN_PASSWORD=${FUSEKI_PASSWORD:-admin}
+    volumes:
+      # The whole FUSEKI_BASE: datasets created through the admin API keep their data in databases/ and their
+      # definition in configuration/, so both must persist. In-memory datasets (app-test) are not persisted.
+      - fuseki-data:/fuseki-base
+    healthcheck:
+      test: ["CMD-SHELL", "wget -qO- http://localhost:3030/$$/ping || exit 1"]
+      interval: 2s
+      timeout: 3s
+      retries: 30
+
+volumes:
+  fuseki-data: