add sandbox, show breaking react-native-webview

package.json

@@ -39,6 +39,7 @@
     "fix": "manypkg fix",
     "lint:fix": "ultra -r --no-pretty lint:fix",
     "lint": "ultra -r --no-pretty lint",
+    "sandbox": "yarn workspace test-sandbox dev",
     "dev:example": "node -r esbuild-register ./scripts/dev.ts example",
     "dev:test": "node -r esbuild-register ./scripts/dev.ts test",
     "upgrade:tamagui": "yarn up '*tamagui*' '@tamagui/*'",

packages/vite-native-client/src/client.ts

@@ -345,6 +345,10 @@ async function fetchUpdate({
 
   if (!mod) {
     console.info(` ❶ hmr - No module found`)
+    console.info(`    looked for ${path} in:`)
+    hotModulesMap.forEach((value, key) => {
+      console.info(`   - ${key}`)
+    })
     // In a code-splitting project,
     // it is common that the hot-updating module is not loaded yet.
     // https://github.com/vitejs/vite/issues/721

tests/sandbox/.gitignore

@@ -0,0 +1,44 @@
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+.turbo
+
+tmp
+dist
+node_modules
+
+*.tsbuildinfo
+*.tmp.js
+
+yarn-error.log
+tsconfig.tsbuildinfo
+.DS_Store
+
+.tamagui
+
+.idea
+
+.env
+# local env files
+.env.local
+.env.development.local
+.env.test.localp
+.env.production.local
+
+.expo
+
+# generated code
+/build
+/ios
+/android
+
+# testing
+/xcodebuild.log
+/dev-server.pid
+/dev-server.log
+/maestro-screenshots
+/test-bundle-output

tests/sandbox/app/_layout.tsx

@@ -0,0 +1,28 @@
+import '@tamagui/core/reset.css'
+import { SchemeProvider, useColorScheme } from '@vxrn/color-scheme'
+import { TamaguiProvider } from 'tamagui'
+import { LoadProgressBar, Slot } from 'one'
+import config from '../src/tamagui.config'
+
+export default function Layout() {
+  return (
+    <>
+      <LoadProgressBar />
+      <SchemeProvider>
+        <TamaguiRootProvider>
+          <Slot />
+        </TamaguiRootProvider>
+      </SchemeProvider>
+    </>
+  )
+}
+
+const TamaguiRootProvider = ({ children }: { children: React.ReactNode }) => {
+  const [scheme] = useColorScheme()
+
+  return (
+    <TamaguiProvider disableInjectCSS config={config} defaultTheme={scheme}>
+      {children}
+    </TamaguiProvider>
+  )
+}

tests/sandbox/app/index.tsx

@@ -0,0 +1,26 @@
+import { Text, View } from 'react-native'
+import WebView from 'react-native-webview'
+
+const filename = import.meta.dirname + '/static.html'
+console.log('filename', filename)
+
+export default () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Text>Welcome to VXS</Text>
+    <Text>Welcome to VXS</Text>
+    <Text>Welcome to VXS</Text>
+    <Text>Welcome to VXS</Text>
+
+    <WebView
+      style={{
+        flex: 1,
+        width: '100%',
+        height: '100%',
+      }}
+      source={{
+        uri: './static.html',
+      }}
+      originWhitelist={['*']}
+    />
+  </View>
+)

tests/sandbox/app/static.html

@@ -0,0 +1 @@
+<div>hello world hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world</div>

tests/sandbox/biome.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.1/schema.json",
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "enabled": true,
+    "ignore": ["**/*/generated-new.ts", "**/*/generated-v2.ts", ".tamagui"],
+    "rules": {
+      "correctness": {
+        "useExhaustiveDependencies": "off",
+        "noInnerDeclarations": "off",
+        "noUnnecessaryContinue": "off",
+        "noConstructorReturn": "off"
+      },
+      "suspicious": {
+        "noImplicitAnyLet": "off",
+        "noConfusingVoidType": "off",
+        "noEmptyInterface": "off",
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off",
+        "noDoubleEquals": "off",
+        "noConsoleLog": "error",
+        "noAssignInExpressions": "off",
+        "noRedeclare": "off"
+      },
+      "style": {
+        "noParameterAssign": "off",
+        "noNonNullAssertion": "off",
+        "noArguments": "off",
+        "noUnusedTemplateLiteral": "off",
+        "useDefaultParameterLast": "off",
+        "useConst": "off",
+        "useEnumInitializers": "off",
+        "useTemplate": "off",
+        "useSelfClosingElements": "off"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off",
+        "noDangerouslySetInnerHtmlWithChildren": "off"
+      },
+      "performance": {
+        "noDelete": "off",
+        "noAccumulatingSpread": "off"
+      },
+      "complexity": {
+        "noForEach": "off",
+        "noBannedTypes": "off",
+        "useLiteralKeys": "off",
+        "useSimplifiedLogicExpression": "off",
+        "useOptionalChain": "off"
+      },
+      "a11y": {
+        "noSvgWithoutTitle": "off",
+        "useMediaCaption": "off",
+        "noHeaderScope": "off",
+        "useAltText": "off",
+        "useButtonType": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100,
+    "ignore": ["**/*/generated-new.ts", "**/*/generated-v2.ts", ".tamagui"]
+  },
+  "javascript": {
+    "formatter": {
+      "trailingComma": "es5",
+      "jsxQuoteStyle": "double",
+      "semicolons": "asNeeded",
+      "quoteStyle": "single"
+    }
+  }
+}

tests/sandbox/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "test-sandbox",
+  "version": "1.1.327",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "one dev",
+    "prod": "one build && one serve",
+    "dev:clean": "one dev --clean",
+    "clean": "one clean",
+    "build:web": "one build",
+    "serve": "one serve"
+  },
+  "dependencies": {
+    "@tamagui/config": "^1.116.7",
+    "@tamagui/image-next": "^1.116.7",
+    "@tamagui/lucide-icons": "^1.116.7",
+    "@tamagui/vite-plugin": "^1.116.7",
+    "@vxrn/color-scheme": "1.1.327",
+    "one": "1.1.327",
+    "react": "^18.3.1",
+    "react-native": "0.74.5",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0",
+    "react-native-web": "^0.19.12",
+    "react-native-webview": "^13.11.1",
+    "tamagui": "^1.116.7"
+  }
+}

tests/sandbox/routes.d.ts

@@ -0,0 +1,12 @@
+import type { OneRouter } from 'one'
+
+declare module 'one' {
+  export namespace OneRouter {
+    export interface __routes<T extends string = string> extends Record<string, unknown> {
+      StaticRoutes: `/` | `/_sitemap`
+      DynamicRoutes: never
+      DynamicRouteTemplate: never
+      IsTyped: true
+    }
+  }
+}

tests/sandbox/src/tamagui.config.ts

@@ -0,0 +1,40 @@
+import { config as configOptions } from '@tamagui/config/v3'
+import { createTamagui } from '@tamagui/core'
+
+export const config = createTamagui({
+  ...configOptions,
+  themes: {
+    ...configOptions.themes,
+    light: {
+      ...configOptions.themes.light,
+      background: 'white',
+      color: 'black',
+    },
+    dark: {
+      ...configOptions.themes.dark,
+      background: 'black',
+      color: 'white',
+    },
+  },
+  media: {
+    ...configOptions.media,
+    xsTouch: {
+      maxWidth: configOptions.media.xs.maxWidth,
+      pointer: 'coarse',
+    },
+  },
+  settings: {
+    ...configOptions.settings,
+    fastSchemeChange: true,
+    // avoids CSS bloat so long as you don't need nesting of dark/light themes
+    maxDarkLightNesting: 2,
+  },
+})
+
+export type Conf = typeof config
+
+declare module '@tamagui/core' {
+  interface TamaguiCustomConfig extends Conf {}
+}
+
+export default config

tests/sandbox/tsconfig.json

@@ -0,0 +1,55 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "outDir": "dist",
+    "paths": {
+      "~/*": ["./*"]
+    },
+    "importHelpers": true,
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "downlevelIteration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "inlineSourceMap": true,
+    "preserveSymlinks": true,
+    "jsx": "react-jsx",
+    "module": "Preserve",
+    "moduleResolution": "Bundler",
+    "noEmit": false,
+    "noEmitOnError": false,
+    "noImplicitAny": false,
+    "noImplicitReturns": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveConstEnums": true,
+    "removeComments": false,
+    "skipLibCheck": true,
+    "sourceMap": false,
+    "strictNullChecks": true,
+    "target": "es2020",
+    "types": [
+      "node",
+      "react",
+      "vite/client"
+    ],
+    "lib": [
+      "dom",
+      "esnext"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    ".expo",
+    "**/test",
+    "**/dist",
+    "**/types",
+    "**/__tests__"
+  ],
+  "typeAcquisition": {
+    "enable": true
+  }
+}

tests/sandbox/vite.config.ts

@@ -0,0 +1,24 @@
+import type { UserConfig } from 'vite'
+import { one } from 'one/vite'
+
+export default {
+  plugins: [
+    one({
+      web: {
+        defaultRenderMode: 'ssg',
+      },
+
+      app: {
+        key: 'one-example',
+      },
+
+      config: {
+        tsConfigPaths: {
+          // On CI, the mono-repo may be partially installed and built.
+          // While the `tsconfig-paths` plugin might attempt to parsing `tsconfig.json` other apps in the mono-repo and give us errors such as `failed to resolve "extends":"expo/tsconfig.base"`, we will ignore these errors.
+          ignoreConfigErrors: true,
+        },
+      },
+    }),
+  ],
+} satisfies UserConfig