one
Version:
One is a new React Framework that makes Vite serve both native and web.
388 lines (387 loc) • 15.3 kB
JavaScript
import { configureVXRNCompilerPlugin } from "@vxrn/compiler";
import { resolvePath } from "@vxrn/resolve";
import events from "node:events";
import path from "node:path";
import { barrel } from "vite-plugin-barrel";
import tsconfigPaths from "vite-tsconfig-paths";
import { autoDepOptimizePlugin, getOptionsFilled, loadEnv } from "vxrn";
import vxrnVitePlugin from "vxrn/vite-plugin";
import { CACHE_KEY } from "../constants";
import { getViteMetroPluginOptions } from "../metro-config/getViteMetroPluginOptions";
import "../polyfills-server";
import { getRouterRootFromOneOptions } from "../utils/getRouterRootFromOneOptions";
import { ensureTSConfig } from "./ensureTsConfig";
import { setOneOptions } from "./loadConfig";
import { clientTreeShakePlugin } from "./plugins/clientTreeShakePlugin";
import { createFileSystemRouterPlugin } from "./plugins/fileSystemRouterPlugin";
import { fixDependenciesPlugin } from "./plugins/fixDependenciesPlugin";
import { generateFileSystemRouteTypesPlugin } from "./plugins/generateFileSystemRouteTypesPlugin";
import { SSRCSSPlugin } from "./plugins/SSRCSSPlugin";
import { virtualEntryId } from "./plugins/virtualEntryConstants";
import { createVirtualEntry } from "./plugins/virtualEntryPlugin";
events.setMaxListeners(1e3);
globalThis.__vxrnEnableNativeEnv = !0;
function one(options = {}) {
const routerRoot = getRouterRootFromOneOptions(options), metroOptions = (() => {
if (options.native?.bundler !== "metro" && !process.env.ONE_METRO_MODE) return null;
process.env.ONE_METRO_MODE && console.info("ONE_METRO_MODE environment variable is set, enabling Metro mode");
const routerRoot2 = getRouterRootFromOneOptions(options), defaultMetroOptions = getViteMetroPluginOptions({
projectRoot: process.cwd(),
// TODO: hard-coded process.cwd(), we should make this optional since the plugin can have a default to vite's `config.root`.
relativeRouterRoot: routerRoot2,
ignoredRouteFiles: options.router?.ignoredRouteFiles,
userDefaultConfigOverrides: options.native?.bundlerOptions?.defaultConfigOverrides,
setupFile: options.setupFile
}), userMetroOptions = options.native?.bundlerOptions, babelConfig = {
...defaultMetroOptions?.babelConfig,
...userMetroOptions?.babelConfig
};
return {
...defaultMetroOptions,
...userMetroOptions,
defaultConfigOverrides: defaultMetroOptions?.defaultConfigOverrides,
// defaultConfigOverrides is merged by getViteMetroPluginOptions, so we need to set it here again.
argv: {
...defaultMetroOptions?.argv,
...userMetroOptions?.argv
},
babelConfig: {
...babelConfig,
plugins: [
...babelConfig.plugins || [],
...options.react?.compiler === !0 || options.react?.compiler === "native" ? ["babel-plugin-react-compiler"] : []
]
},
mainModuleName: "one/metro-entry"
// So users won't need to write `"main": "one/metro-entry"` in their `package.json` like ordinary Expo apps.
};
})(), vxrnPlugins = [];
if (!process.env.IS_VXRN_CLI)
console.warn("Experimental: running VxRN as a Vite plugin. This is not yet stable."), vxrnPlugins.push(
vxrnVitePlugin({
metro: metroOptions
})
);
else if (!globalThis.__oneOptions)
return setOneOptions(options), globalThis.__vxrnPluginConfig__ = options, globalThis.__vxrnMetroOptions__ = metroOptions, [];
options.config?.ensureTSConfig !== !1 && ensureTSConfig();
let tsConfigPathsPlugin = null;
const vxrnOptions = getOptionsFilled(), root = vxrnOptions?.root || process.cwd(), barrelOption = options.optimization?.barrel, compiler = options.react?.compiler;
compiler && configureVXRNCompilerPlugin({
enableCompiler: compiler === "native" ? ["ios", "android"] : compiler === "web" ? ["ssr", "client"] : !0
});
const autoDepsOptions = options.ssr?.autoDepsOptimization, devAndProdPlugins = [
{
name: "one:config",
__get: options
},
barrelOption ? barrel({
packages: Array.isArray(barrelOption) ? barrelOption : ["@tamagui/lucide-icons"]
}) : null,
{
name: "one-define-client-env",
async config(userConfig) {
const { clientEnvDefine } = await loadEnv(
vxrnOptions?.mode ?? userConfig?.mode ?? "development",
process.cwd(),
userConfig?.envPrefix
);
return {
define: {
...clientEnvDefine,
...process.env.ONE_DEBUG_ROUTER && {
"process.env.ONE_DEBUG_ROUTER": JSON.stringify(process.env.ONE_DEBUG_ROUTER)
}
}
};
}
},
...autoDepsOptions === !1 ? [] : [
autoDepOptimizePlugin({
onScannedDeps({ hasReanimated, hasNativewind }) {
configureVXRNCompilerPlugin({
enableReanimated: hasReanimated,
enableNativeCSS: options.native?.css ?? hasNativewind,
enableNativewind: hasNativewind
});
},
root,
include: /node_modules/,
...autoDepsOptions === !0 ? {} : autoDepsOptions
})
],
// proxy because you cant add a plugin inside a plugin
new Proxy(
{
name: "one:tsconfig-paths",
config(configIncoming) {
const pathsConfig = options.config?.tsConfigPaths;
if (pathsConfig === !1 || configIncoming.plugins?.flat().some((p) => p && p.name === "vite-tsconfig-paths"))
return;
tsConfigPathsPlugin = tsconfigPaths({
skip: (dir) => (dir.split("/").pop() || "").startsWith("."),
...pathsConfig && typeof pathsConfig == "object" ? pathsConfig : {}
});
},
configResolved() {
},
resolveId() {
}
},
{
get(target, key, thisArg) {
if (key === "config" || key === "name")
return Reflect.get(target, key, thisArg);
if (tsConfigPathsPlugin)
return Reflect.get(tsConfigPathsPlugin, key, thisArg);
}
}
),
{
name: "one-aliases",
enforce: "pre",
config() {
let tslibLitePath = "";
try {
tslibLitePath = resolvePath("@vxrn/tslib-lite", process.cwd());
} catch (err) {
console.info("Can't find tslib-lite, falling back to tslib"), process.env.DEBUG && console.error(err);
}
return {
resolve: {
alias: {
// testing getting transition between routes working
// 'use-sync-external-store/with-selector': resolvePath(
// 'use-sync-external-store/shim/with-selector'
// ),
...tslibLitePath && {
tslib: tslibLitePath
}
}
// [
// {
// find: /tslib/,
// replacement: resolvePath('@vxrn/tslib-lite'),
// },
// // not working but would save ~30Kb stat
// // {
// // find: /@react-navigation\/core.*\/getStateFromPath/,
// // replacement: join(forkPath, 'fork', 'getStateFromPath.mjs'),
// // },
// // {
// // find: /@react-navigation\/core.*\/getPathFromState/,
// // replacement: join(forkPath, 'fork', 'getPathFromState.mjs'),
// // },
// ],
}
};
}
},
{
name: "one:init-config",
config() {
return {
define: {
// we define this not in environment.client because there must be a bug in vite
// it doesnt define the import.meta.env at all if you do that
"process.env.TAMAGUI_ENVIRONMENT": '"client"',
"process.env.VITE_ENVIRONMENT": '"client"',
"import.meta.env.VITE_ENVIRONMENT": '"client"',
"process.env.VITE_PLATFORM": '"web"',
"import.meta.env.VITE_PLATFORM": '"web"',
"process.env.EXPO_OS": '"web"',
"import.meta.env.EXPO_OS": '"web"',
...options.web?.defaultRenderMode && {
"process.env.ONE_DEFAULT_RENDER_MODE": JSON.stringify(options.web.defaultRenderMode),
"import.meta.env.ONE_DEFAULT_RENDER_MODE": JSON.stringify(
options.web.defaultRenderMode
)
},
...(() => {
if (!options.setupFile) return {};
let setupFiles;
return typeof options.setupFile == "string" ? setupFiles = {
client: options.setupFile,
server: options.setupFile,
ios: options.setupFile,
android: options.setupFile
} : "native" in options.setupFile ? setupFiles = {
client: options.setupFile.client,
server: options.setupFile.server,
ios: options.setupFile.native,
android: options.setupFile.native
} : setupFiles = options.setupFile, {
...setupFiles.client && {
"process.env.ONE_SETUP_FILE_CLIENT": JSON.stringify(setupFiles.client)
},
...setupFiles.server && {
"process.env.ONE_SETUP_FILE_SERVER": JSON.stringify(setupFiles.server)
},
...setupFiles.ios && {
"process.env.ONE_SETUP_FILE_IOS": JSON.stringify(setupFiles.ios)
},
...setupFiles.android && {
"process.env.ONE_SETUP_FILE_ANDROID": JSON.stringify(setupFiles.android)
}
};
})(),
...process.env.NODE_ENV !== "production" && vxrnOptions && {
"process.env.ONE_SERVER_URL": JSON.stringify(vxrnOptions.server.url),
"import.meta.env.ONE_SERVER_URL": JSON.stringify(vxrnOptions.server.url)
}
},
environments: {
// we define client vars not in environment.client because there must be a bug in vite
// it doesnt define the import.meta.env at all if you do that
// client: {
// define: {
// },
// },
ssr: {
define: {
"process.env.TAMAGUI_ENVIRONMENT": '"ssr"',
"process.env.VITE_ENVIRONMENT": '"ssr"',
// Note that we are also setting `process.env.VITE_ENVIRONMENT = 'ssr'` for this current process. See `setServerGlobals()` and `setupServerGlobals.ts`.
"import.meta.env.VITE_ENVIRONMENT": '"ssr"',
"process.env.VITE_PLATFORM": '"web"',
"import.meta.env.VITE_PLATFORM": '"web"',
"process.env.EXPO_OS": '"web"',
"import.meta.env.EXPO_OS": '"web"'
}
},
ios: {
define: {
"process.env.TAMAGUI_ENVIRONMENT": '"ios"',
"process.env.VITE_ENVIRONMENT": '"ios"',
"import.meta.env.VITE_ENVIRONMENT": '"ios"',
"process.env.VITE_PLATFORM": '"native"',
"import.meta.env.VITE_PLATFORM": '"native"',
"process.env.EXPO_OS": '"ios"',
"import.meta.env.EXPO_OS": '"ios"'
}
},
android: {
define: {
"process.env.TAMAGUI_ENVIRONMENT": '"android"',
"process.env.VITE_ENVIRONMENT": '"android"',
"import.meta.env.VITE_ENVIRONMENT": '"android"',
"process.env.VITE_PLATFORM": '"native"',
"import.meta.env.VITE_PLATFORM": '"native"',
"process.env.EXPO_OS": '"android"',
"import.meta.env.EXPO_OS": '"android"'
}
}
}
};
}
},
{
name: "one:tamagui",
config() {
return {
define: {
// safe to set because it only affects web in tamagui, and one is always react 19
"process.env.TAMAGUI_REACT_19": '"1"'
},
environments: {
ssr: {
define: {
"process.env.TAMAGUI_IS_SERVER": '"1"',
"process.env.TAMAGUI_KEEP_THEMES": '"1"'
}
},
ios: {
define: {
"process.env.TAMAGUI_KEEP_THEMES": '"1"'
}
},
android: {
define: {
"process.env.TAMAGUI_KEEP_THEMES": '"1"'
}
}
}
};
}
},
{
name: "route-module-hmr-fix",
hotUpdate({ server, modules }) {
return modules.map((m) => {
const { id } = m;
return id && path.relative(server.config.root, id).split(path.sep)[0] === "app" && (m.acceptedHmrExports = /* @__PURE__ */ new Set()), m;
});
}
},
// Plugins may transform the source code and add imports of `react/jsx-dev-runtime`, which won't be discovered by Vite's initial `scanImports` since the implementation is using ESbuild where such plugins are not executed.
// Thus, if the project has a valid `react/jsx-dev-runtime` import, we tell Vite to optimize it, so Vite won't only discover it on the next page load and trigger a full reload.
{
name: "one:optimize-dev-deps",
config(_, env) {
if (env.mode === "development")
return {
optimizeDeps: {
include: ["react/jsx-dev-runtime", "react/compiler-runtime"]
}
};
}
},
{
name: "one:remove-server-from-client",
enforce: "pre",
transform(code, id) {
if (this.environment.name === "client" && id.includes("one-server-only"))
return code.replace(
'import { AsyncLocalStorage } from "node:async_hooks"',
"class AsyncLocalStorage {}"
);
}
}
], nativeWebDevAndProdPlugsin = [
clientTreeShakePlugin()
//
// reactScanPlugin
];
globalThis.__vxrnAddNativePlugins = nativeWebDevAndProdPlugsin, globalThis.__vxrnAddWebPluginsProd = devAndProdPlugins;
const flags = {
experimentalPreventLayoutRemounting: options.router?.experimental?.preventLayoutRemounting
};
return [
...vxrnPlugins,
...devAndProdPlugins,
...nativeWebDevAndProdPlugsin,
/**
* This is really the meat of one, where it handles requests:
*/
createFileSystemRouterPlugin(options),
generateFileSystemRouteTypesPlugin(options),
fixDependenciesPlugin(options.deps),
createVirtualEntry({
...options,
flags,
root: routerRoot
}),
{
name: "one-define-environment",
config() {
return {
define: {
...options.native?.key && {
"process.env.ONE_APP_NAME": JSON.stringify(options.native.key),
"import.meta.env.ONE_APP_NAME": JSON.stringify(options.native.key)
},
"process.env.ONE_CACHE_KEY": JSON.stringify(CACHE_KEY),
"import.meta.env.ONE_CACHE_KEY": JSON.stringify(CACHE_KEY)
}
};
}
},
SSRCSSPlugin({
entries: [virtualEntryId]
})
];
}
export {
one
};
//# sourceMappingURL=one.js.map