= {
20 | req?: IncomingMessage;
21 | res?: ServerResponse;
22 | params?: Q;
23 | query: ParsedUrlQuery;
24 | isExporting: boolean;
25 | };
26 |
27 | type JustProps = { props: P; revalidate?: number | boolean };
28 | type NotFound = { notFound?: true };
29 |
30 | export type GetPropsResult
= JustProps
& NotFound;
31 |
32 | export type GetProps<
33 | P extends { [key: string]: any } = { [key: string]: any },
34 | Q extends ParsedUrlQuery = ParsedUrlQuery
35 | > = (context: GetPropsContext) => Promise>;
36 |
37 | export type InferGetPropsType = T extends GetProps
38 | ? P
39 | : T extends (
40 | context?: GetPropsContext
41 | ) => Promise>
42 | ? P
43 | : never;
44 |
45 | export interface PageFileType {
46 | default: React.ComponentType;
47 | getProps?: GetProps;
48 | getPaths?: GetPaths;
49 | }
50 |
51 | export type Await = T extends {
52 | then(onfulfilled?: (value: infer U) => unknown): unknown;
53 | } ? U : T;
54 |
--------------------------------------------------------------------------------
/packages/vitext/src/node/utils.ts:
--------------------------------------------------------------------------------
1 | // Copied from flareact
2 | import reactRefresh from '@vitejs/plugin-react-refresh';
3 | import glob from 'fast-glob';
4 | import * as fs from 'fs';
5 | import * as path from 'path';
6 | import React from 'react';
7 | import Vite from 'vite';
8 | import { App as BaseApp, AppType } from 'vitext/app.js';
9 | import { Document as BaseDocument, DocumentType } from 'vitext/document.js';
10 |
11 | import { createVitextPlugin } from './plugin';
12 | import { DYNAMIC_PAGE, getEntries } from './route/pages';
13 | import { Entries, PageFileType } from './types';
14 |
15 | export function isObject(value: unknown): value is Record {
16 | return Object.prototype.toString.call(value) === '[object Object]';
17 | }
18 |
19 | export interface Hostname {
20 | // undefined sets the default behaviour of server.listen
21 | host: string | undefined;
22 | // resolve to localhost when possible
23 | name: string;
24 | }
25 |
26 | export function resolveHostname(
27 | optionsHost: string | boolean | undefined
28 | ): Hostname {
29 | let host: string | undefined;
30 | if (
31 | optionsHost === undefined ||
32 | optionsHost === false ||
33 | optionsHost === 'localhost'
34 | ) {
35 | // Use a secure default
36 | host = '127.0.0.1';
37 | } else if (optionsHost === true) {
38 | // If passed --host in the CLI without arguments
39 | host = undefined; // undefined typically means 0.0.0.0 or :: (listen on all IPs)
40 | } else {
41 | host = optionsHost;
42 | }
43 |
44 | // Set host name to localhost when possible, unless the user explicitly asked for '127.0.0.1'
45 | const name =
46 | (optionsHost !== '127.0.0.1' && host === '127.0.0.1') ||
47 | host === '0.0.0.0' ||
48 | host === '::' ||
49 | host === undefined
50 | ? 'localhost'
51 | : host;
52 |
53 | return { host, name };
54 | }
55 | export function extractDynamicParams(source: string, path: string) {
56 | let test: RegExp | string = source;
57 | const parts = [];
58 | const params: Record = {};
59 |
60 | for (const match of source.matchAll(/\[(\w+)\]/g)) {
61 | parts.push(match[1]);
62 |
63 | test = test.replace(DYNAMIC_PAGE, () => '([\\w_-]+)');
64 | }
65 |
66 | test = new RegExp(test, 'g');
67 |
68 | const matches = path.matchAll(test);
69 |
70 | for (const match of matches) {
71 | parts.forEach((part, idx) => (params[part] = match[idx + 1]));
72 | }
73 |
74 | return params;
75 | }
76 |
77 | // This utility is based on https://github.com/zertosh/htmlescape
78 | // License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
79 |
80 | const ESCAPE_LOOKUP: Record = {
81 | '&': '\\u0026',
82 | '>': '\\u003e',
83 | '<': '\\u003c',
84 | '\u2028': '\\u2028',
85 | '\u2029': '\\u2029',
86 | };
87 |
88 | const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
89 |
90 | export function htmlEscapeJsonString(str: string) {
91 | return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
92 | }
93 |
94 | const importQueryRE = /(\?|&)import=?(?:&|$)/;
95 | const trailingSeparatorRE = /[\?&]$/;
96 |
97 | export function removeImportQuery(url: string): string {
98 | return url.replace(importQueryRE, '$1').replace(trailingSeparatorRE, '');
99 | }
100 |
101 | type ComponentFileType = { default: AppType | DocumentType } & Record<
102 | string,
103 | any
104 | >;
105 |
106 | type PromisedComponentFileType = Promise | ComponentFileType;
107 |
108 | export async function resolveCustomComponents({
109 | entries,
110 | server,
111 | }: {
112 | entries: ReturnType;
113 | server: Vite.ViteDevServer;
114 | }) {
115 | const customApp = entries.find((page) => page.pageName === '/_app');
116 | const customDocument = entries.find((page) => page.pageName === '/_document');
117 |
118 | let AppFile: PromisedComponentFileType = { default: BaseApp };
119 | if (customApp) {
120 | AppFile = server.ssrLoadModule(
121 | customApp!.absolutePagePath
122 | ) as PromisedComponentFileType;
123 | }
124 |
125 | let DocumentFile: PromisedComponentFileType = { default: BaseDocument };
126 | if (customDocument) {
127 | DocumentFile = server.ssrLoadModule(
128 | customDocument!.absolutePagePath
129 | ) as PromisedComponentFileType;
130 | }
131 |
132 | const [{ default: Document }, { default: App }] = await Promise.all([
133 | DocumentFile,
134 | AppFile,
135 | ]);
136 | return { Document, App } as {
137 | Document: typeof BaseDocument;
138 | App: typeof BaseApp;
139 | };
140 | }
141 |
142 | /*
143 | * /@fs/..../@vitext/hack-import/...js to /@vitext/hack-import/...
144 | */
145 | export function resolveHackImport(id: string) {
146 | const str = '/@vitext/hack-import';
147 | const portionIndex = id.search(str);
148 | const strLength = str.length;
149 | if (portionIndex < 0) return id;
150 | return id.slice(portionIndex + strLength, id.length - 3);
151 | }
152 |
153 | export async function getEntryPoints(
154 | config: Vite.UserConfig | Vite.ViteDevServer['config']
155 | ) {
156 | return await glob('./pages/**/*.+(js|jsx|ts|tsx)', {
157 | cwd: config.root,
158 | });
159 | }
160 |
161 | const returnConfigFiles = (root: string) =>
162 | ['vitext.config.js', 'vitext.config.ts'].map((file) =>
163 | path.resolve(root, file)
164 | );
165 |
166 | export async function resolveInlineConfig(
167 | options: Vite.InlineConfig & Vite.UserConfig & { root: string },
168 | command: 'build' | 'serve'
169 | ): Promise {
170 | const configFile: string =
171 | returnConfigFiles(options.root).find((file) => fs.existsSync(file)) ||
172 | './vitext.config.js';
173 |
174 | const config = await Vite.resolveConfig({ ...options, configFile }, command);
175 |
176 | if (command === 'build') {
177 | // @ts-ignore vite#issues#4016#4096
178 | config.plugins = config.plugins.filter(
179 | (p) => p.name !== 'vite:import-analysis'
180 | );
181 | }
182 |
183 | return {
184 | ...config,
185 | assetsInclude: options.assetsInclude,
186 | configFile: configFile,
187 | plugins: [
188 | {
189 | ...reactRefresh({
190 | exclude: [/vitext\/dynamic\.js/, /vitext\/app\.js/],
191 | }),
192 | enforce: 'post',
193 | },
194 | ...createVitextPlugin(),
195 | ...config.plugins,
196 | ],
197 | };
198 | }
199 |
200 | export async function loadPage({
201 | server,
202 | entries,
203 | page,
204 | }: {
205 | server: Vite.ViteDevServer;
206 | entries: Entries;
207 | page: Entries[number];
208 | }) {
209 | const absolutePagePath = entries.find(
210 | (p) => p.pageName === page.pageName
211 | )!.absolutePagePath;
212 |
213 | return server.ssrLoadModule(
214 | path.join(server.config.root || '', absolutePagePath)
215 | ) as Promise;
216 | }
217 |
218 | export const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`;
219 | export const jsLangs = `\\.(js|ts|jsx|tsx)($|\\?)`;
220 | export const jsLangsRE = new RegExp(jsLangs);
221 | export const cssLangRE = new RegExp(cssLangs);
222 | export const cssModuleRE = new RegExp(`\\.module${cssLangs}`);
223 | export const directRequestRE = /(\?|&)direct\b/;
224 | export const commonjsProxyRE = /\?commonjs-proxy/;
225 |
--------------------------------------------------------------------------------
/packages/vitext/src/react/dynamic.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | The MIT License (MIT)
3 |
4 | Copyright (c) 2021 Vercel, Inc.
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy
7 | of this software and associated documentation files (the "Software"), to deal
8 | in the Software without restriction, including without limitation the rights
9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | */
24 | // Modified to be compatible with vitext
25 | import React from 'react';
26 | // eslint-disable-next-line
27 | import Loadable, { CommonOptions } from 'vitext/src/react/loadable';
28 |
29 | const isServerSide = typeof window === 'undefined';
30 |
31 | export type Loader = () => Promise
;
32 |
33 | export type LoadableOptions
= Omit & {
34 | loader?: Loader;
35 | loading?: ({
36 | error,
37 | isLoading,
38 | pastDelay,
39 | }: {
40 | error?: Error | null;
41 | isLoading?: boolean;
42 | pastDelay?: boolean;
43 | retry?: () => void;
44 | timedOut?: boolean;
45 | }) => JSX.Element | null;
46 | };
47 |
48 | export type DynamicOptions
= LoadableOptions
;
49 |
50 | export type LoadableFn
= (opts: LoadableOptions
) => P;
51 |
52 | export type LoadableComponent
= P;
53 |
54 | type Props
= P & {
55 | fallback: string | LoadableOptions['loading'] | JSX.Element;
56 | };
57 | function createDynamicComponent(
58 | loadableOptions: LoadableOptions>,
59 | opts: { server: boolean }
60 | ): React.ComponentType> {
61 | const loadableFn: LoadableFn> = Loadable;
62 | const ResultComponent: React.ComponentType = loadableFn(loadableOptions);
63 |
64 | // Todo please clean this, that's total trash, to get ready for the release
65 | const init = (ResultComponent as any).render.init as () => void;
66 | if (isServerSide && !opts.server) {
67 | (globalThis as any).ALL_INITIALIZERS = (
68 | (globalThis as any).ALL_INITIALIZERS as (() => void)[]
69 | ).filter((func) => func !== init);
70 | }
71 |
72 | const DynamicComponent: React.ComponentType> = ({
73 | ...props
74 | }: P & {
75 | fallback: string | LoadableOptions['loading'] | JSX.Element;
76 | }) => {
77 | loadableOptions.loading =
78 | typeof props.fallback === 'function'
79 | ? props.fallback
80 | : () => <>{props.fallback};
81 |
82 | const Loading = loadableOptions.loading!;
83 | // This will only be rendered on the server side
84 | if (isServerSide && !opts.server) {
85 | return (
86 |
87 | );
88 | }
89 | return ;
90 | };
91 |
92 | return DynamicComponent;
93 | }
94 |
95 | export default function dynamic(
96 | loader: Loader>,
97 | opts: { server: boolean } = { server: true }
98 | ): React.ComponentType> {
99 | const loadableOptions: LoadableOptions> = {
100 | delay: 400,
101 | };
102 |
103 | loadableOptions.loader = loader;
104 |
105 | return createDynamicComponent(loadableOptions, opts);
106 | }
107 |
--------------------------------------------------------------------------------
/packages/vitext/src/react/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react/index';
2 |
3 | type Props = {
4 | progressive?: boolean;
5 | server?: boolean;
6 | };
7 |
8 | const SuspenseServer: React.ComponentType = ({
9 | fallback,
10 | }) => {
11 | return <>{fallback}
12 | };
13 |
14 | const isServerSide = typeof window === 'undefined';
15 |
16 | const injectedReact: typeof React = {
17 | ...React,
18 | Suspense: isServerSide ? SuspenseServer as any : React.Suspense,
19 | };
20 |
21 | const {
22 | lazy,
23 | Children,
24 | Component,
25 | Fragment,
26 | Profiler,
27 | PureComponent,
28 | StrictMode,
29 | cloneElement,
30 | createContext,
31 | createElement,
32 | createFactory,
33 | createRef,
34 | forwardRef,
35 | isValidElement,
36 | memo,
37 | useCallback,
38 | useContext,
39 | useDebugValue,
40 | useEffect,
41 | useImperativeHandle,
42 | useLayoutEffect,
43 | useMemo,
44 | useReducer,
45 | useRef,
46 | useState,
47 | version,
48 | Suspense
49 | } = injectedReact;
50 |
51 | export {
52 | Children,
53 | Component,
54 | Fragment,
55 | Profiler,
56 | PureComponent,
57 | StrictMode,
58 | cloneElement,
59 | createContext,
60 | createElement,
61 | createFactory,
62 | createRef,
63 | forwardRef,
64 | isValidElement,
65 | memo,
66 | useCallback,
67 | useContext,
68 | useDebugValue,
69 | useEffect,
70 | useImperativeHandle,
71 | useLayoutEffect,
72 | useMemo,
73 | useReducer,
74 | useRef,
75 | useState,
76 | version,
77 | lazy,
78 | Suspense,
79 | };
80 |
81 | export default injectedReact
82 |
83 |
--------------------------------------------------------------------------------
/packages/vitext/src/react/loadable.d.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | import React from 'react';
3 |
4 | declare namespace LoadableExport {
5 | interface LoadingComponentProps {
6 | isLoading: boolean;
7 | pastDelay: boolean;
8 | timedOut: boolean;
9 | error: any;
10 | retry: () => void;
11 | }
12 | interface CommonOptions {
13 | /**
14 | * React component displayed after delay until loader() succeeds. Also responsible for displaying errors.
15 | *
16 | * If you don't want to render anything you can pass a function that returns null
17 | * (this is considered a valid React component).
18 | */
19 | loading: React.ComponentType;
20 | /**
21 | * Defaults to 200, in milliseconds.
22 | *
23 | * Only show the loading component if the loader() has taken this long to succeed or error.
24 | */
25 | delay?: number | false | null | undefined;
26 | /**
27 | * Disabled by default.
28 | *
29 | * After the specified time in milliseconds passes, the component's `timedOut` prop will be set to true.
30 | */
31 | timeout?: number | false | null | undefined;
32 |
33 | /**
34 | * Optional array of module paths that `Loadable.Capture`'s `report` function will be applied on during
35 | * server-side rendering. This helps the server know which modules were imported/used during SSR.
36 | * ```ts
37 | * Loadable({
38 | * loader: () => import('./my-component'),
39 | * modules: ['./my-component'],
40 | * });
41 | * ```
42 | */
43 | modules?: string[] | undefined;
44 |
45 | /**
46 | * An optional function which returns an array of Webpack module ids which you can get
47 | * with require.resolveWeak. This is used by the client (inside `Loadable.preloadReady`) to
48 | * guarantee each webpack module is preloaded before the first client render.
49 | * ```ts
50 | * Loadable({
51 | * loader: () => import('./Foo'),
52 | * webpack: () => [require.resolveWeak('./Foo')],
53 | * });
54 | * ```
55 | */
56 | webpack?: (() => Array) | undefined;
57 | }
58 | interface ILoadable {
59 | >(opts: any): React.ComponentType
;
60 | Map
>(
61 | opts: any
62 | ): React.ComponentType
;
63 | preloadAll(): Promise;
64 | preloadReady(): Promise;
65 | }
66 | }
67 |
68 | // eslint-disable-next-line no-redeclare
69 | declare const LoadableExport: LoadableExport.ILoadable;
70 |
71 | export = LoadableExport;
72 |
--------------------------------------------------------------------------------
/packages/vitext/src/react/loadable.js:
--------------------------------------------------------------------------------
1 | /**
2 | @copyright (c) 2017-present James Kyle
3 | MIT License
4 | Permission is hereby granted, free of charge, to any person obtaining
5 | a copy of this software and associated documentation files (the
6 | "Software"), to deal in the Software without restriction, including
7 | without limitation the rights to use, copy, modify, merge, publish,
8 | distribute, sublicense, and/or sell copies of the Software, and to
9 | permit persons to whom the Software is furnished to do so, subject to
10 | the following conditions:
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
14 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
15 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
16 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
17 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
18 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
19 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
20 | */
21 | // https://github.com/jamiebuilds/react-loadable/blob/v5.5.0/src/index.js
22 | // Modified to be compatible with webpack 4 / Next.js
23 | // @ts-check
24 | import React from 'react';
25 | import useSubscriptionDefault from 'use-subscription';
26 |
27 | export const LoadableContext = React.createContext(null);
28 |
29 | if (!(globalThis.ALL_INITIALIZERS && globalThis.READY_INITIALIZERS)) {
30 | globalThis.ALL_INITIALIZERS = globalThis.ALL_INITIALIZERS ?? [];
31 | globalThis.READY_INITIALIZERS = globalThis.READY_INITIALIZERS ?? [];
32 | }
33 | const READY_INITIALIZERS = globalThis.READY_INITIALIZERS;
34 | let initialized = false;
35 |
36 | function load(loader) {
37 | const promise = loader();
38 |
39 | const state = {
40 | loading: true,
41 | loaded: null,
42 | error: null,
43 | };
44 |
45 | state.promise = promise
46 | .then((loaded) => {
47 | state.loading = false;
48 | state.loaded = loaded;
49 | return loaded;
50 | })
51 | .catch((err) => {
52 | state.loading = false;
53 | state.error = err;
54 | throw err;
55 | });
56 |
57 | return state;
58 | }
59 |
60 | function resolve(obj) {
61 | return obj && obj.__esModule ? obj.default : obj;
62 | }
63 |
64 | function createLoadableComponent(loadFn, options) {
65 | const defaultOpts = {
66 | delay: 200,
67 | loader: null,
68 | loading: null,
69 | timeout: null,
70 | webpack: null,
71 | modules: null,
72 | };
73 |
74 | Object.keys((key) => (options[key] = options[key] ?? defaultOpts[key]));
75 |
76 | const opts = options;
77 | // let opts = Object.assign(
78 | // {
79 | // delay: 200,
80 | // loader: null,
81 | // loading: null,
82 | // timeout: null,
83 | // webpack: null,
84 | // modules: null,
85 | // },
86 | // options
87 | // );
88 |
89 | let subscription = null;
90 |
91 | function init() {
92 | if (!subscription) {
93 | const sub = new LoadableSubscription(loadFn, opts);
94 | subscription = {
95 | getCurrentValue: sub.getCurrentValue.bind(sub),
96 | subscribe: sub.subscribe.bind(sub),
97 | retry: sub.retry.bind(sub),
98 | promise: sub.promise.bind(sub),
99 | };
100 | }
101 | return subscription.promise();
102 | }
103 |
104 | // Server only
105 | if (typeof window === 'undefined') {
106 | globalThis.ALL_INITIALIZERS.push(init);
107 | }
108 |
109 | // Client only
110 | if (
111 | !initialized &&
112 | typeof window !== 'undefined'
113 | // typeof opts.webpack === 'function' &&
114 | // typeof require.resolveWeak === 'function'
115 | ) {
116 | // const moduleIds = opts.webpack();
117 | READY_INITIALIZERS.push((ids) => {
118 | return init();
119 | });
120 | }
121 |
122 | const LoadableComponent = (props, ref) => {
123 | init();
124 |
125 | const context = React.useContext(LoadableContext);
126 | const state = useSubscriptionDefault.useSubscription(subscription);
127 |
128 | React.useImperativeHandle(
129 | ref,
130 | () => ({
131 | retry: subscription.retry,
132 | }),
133 | []
134 | );
135 |
136 | if (context && Array.isArray(opts.modules)) {
137 | opts.modules.forEach((moduleName) => {
138 | context(moduleName);
139 | });
140 | }
141 |
142 | return React.useMemo(() => {
143 | if (state.loading || state.error) {
144 | return React.createElement(opts.loading, {
145 | isLoading: state.loading,
146 | pastDelay: state.pastDelay,
147 | timedOut: state.timedOut,
148 | error: state.error,
149 | retry: subscription.retry,
150 | });
151 | } else if (state.loaded) {
152 | return React.createElement(resolve(state.loaded), props);
153 | } else {
154 | return null;
155 | }
156 | }, [props, state]);
157 | };
158 |
159 | LoadableComponent.preload = () => init();
160 | LoadableComponent.init = init;
161 |
162 | return React.forwardRef(LoadableComponent);
163 | }
164 |
165 | class LoadableSubscription {
166 | constructor(loadFn, opts) {
167 | this._loadFn = loadFn;
168 | this._opts = opts;
169 | this._callbacks = new Set();
170 | this._delay = null;
171 | this._timeout = null;
172 |
173 | this.retry();
174 | }
175 |
176 | promise() {
177 | return this._res.promise;
178 | }
179 |
180 | retry() {
181 | this._clearTimeouts();
182 | this._res = this._loadFn(this._opts.loader);
183 |
184 | this._state = {
185 | pastDelay: false,
186 | timedOut: false,
187 | };
188 |
189 | const { _res: res, _opts: opts } = this;
190 |
191 | if (res.loading) {
192 | if (typeof opts.delay === 'number') {
193 | if (opts.delay === 0) {
194 | this._state.pastDelay = true;
195 | } else {
196 | this._delay = setTimeout(() => {
197 | this._update({
198 | pastDelay: true,
199 | });
200 | }, opts.delay);
201 | }
202 | }
203 |
204 | if (typeof opts.timeout === 'number') {
205 | this._timeout = setTimeout(() => {
206 | this._update({ timedOut: true });
207 | }, opts.timeout);
208 | }
209 | }
210 |
211 | this._res.promise
212 | .then(() => {
213 | this._update({});
214 | this._clearTimeouts();
215 | })
216 | .catch((_err) => {
217 | this._update({});
218 | this._clearTimeouts();
219 | });
220 | this._update({});
221 | }
222 |
223 | _update(partial) {
224 | this._state = {
225 | ...this._state,
226 | error: this._res.error,
227 | loaded: this._res.loaded,
228 | loading: this._res.loading,
229 | ...partial,
230 | };
231 | this._callbacks.forEach((callback) => callback());
232 | }
233 |
234 | _clearTimeouts() {
235 | clearTimeout(this._delay);
236 | clearTimeout(this._timeout);
237 | }
238 |
239 | getCurrentValue() {
240 | return this._state;
241 | }
242 |
243 | subscribe(callback) {
244 | this._callbacks.add(callback);
245 | return () => {
246 | this._callbacks.delete(callback);
247 | };
248 | }
249 | }
250 |
251 | function Loadable(opts) {
252 | return createLoadableComponent(load, opts);
253 | }
254 |
255 | function flushInitializers(initializers, ids) {
256 | const promises = [];
257 |
258 | while (initializers.length) {
259 | const init = initializers.pop();
260 | promises.push(init(ids));
261 | }
262 |
263 | return Promise.all(promises).then(() => {
264 | if (initializers.length) {
265 | return flushInitializers(initializers, ids);
266 | }
267 | });
268 | }
269 |
270 | Loadable.preloadAll = () => {
271 | return new Promise((resolveInitializers, reject) => {
272 | flushInitializers(globalThis.ALL_INITIALIZERS).then(
273 | resolveInitializers,
274 | reject
275 | );
276 | });
277 | };
278 |
279 | Loadable.preloadReady = (ids = []) => {
280 | return new Promise((resolvePreload) => {
281 | const res = () => {
282 | initialized = true;
283 | return resolvePreload();
284 | };
285 | // We always will resolve, errors should be handled within loading UIs.
286 | flushInitializers(READY_INITIALIZERS, ids).then(res, res);
287 | });
288 | };
289 |
290 | export default Loadable;
291 |
--------------------------------------------------------------------------------
/packages/vitext/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "moduleResolution": "Node",
5 | "esModuleInterop": true,
6 | "lib": ["ESNext", "DOM"],
7 | "rootDir": "./",
8 | "resolveJsonModule": true,
9 | "jsx": "react-jsx"
10 | },
11 | "exclude": []
12 | }
13 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | trailingComma: 'es5',
3 | semi: true,
4 | singleQuote: true,
5 | importOrderSeparation: true,
6 | importOrder: ['^@core/(.*)$', '^@server/(.*)$', '^@ui/(.*)$', '^[./]'],
7 | };
8 |
--------------------------------------------------------------------------------
/scripts/jestEnv.js:
--------------------------------------------------------------------------------
1 | const os = require('os');
2 | const fs = require('fs');
3 | const path = require('path');
4 | const NodeEnvironment = require('jest-environment-node');
5 | const { chromium } = require('playwright-chromium');
6 |
7 | const DIR = path.join(os.tmpdir(), 'jest_playwright_global_setup');
8 |
9 | module.exports = class PlaywrightEnvironment extends NodeEnvironment {
10 | constructor(config, context) {
11 | super(config);
12 | this.testPath = context.testPath;
13 | }
14 |
15 | async setup() {
16 | await super.setup();
17 | const wsEndpoint = fs.readFileSync(path.join(DIR, 'wsEndpoint'), 'utf-8');
18 | if (!wsEndpoint) {
19 | throw new Error('wsEndpoint not found');
20 | }
21 |
22 | // skip browser setup for non-playground tests
23 | if (!this.testPath.includes('playground')) {
24 | return;
25 | }
26 |
27 | const browser = (this.browser = await chromium.connect({
28 | wsEndpoint,
29 | }));
30 | this.global.page = await browser.newPage();
31 |
32 | // suppress @vue/compiler-sfc warning
33 | const console = this.global.console;
34 | const warn = console.warn;
35 | console.warn = (msg, ...args) => {
36 | if (!msg.includes('@vue/compiler-sfc')) {
37 | warn.call(console, msg, ...args);
38 | }
39 | };
40 | }
41 |
42 | async teardown() {
43 | if (this.browser) {
44 | await this.browser.close();
45 | }
46 | await super.teardown();
47 | }
48 | };
49 |
--------------------------------------------------------------------------------
/scripts/jestGlobalSetup.js:
--------------------------------------------------------------------------------
1 | const os = require('os');
2 | const fs = require('fs-extra');
3 | const path = require('path');
4 | const { chromium } = require('playwright-chromium');
5 |
6 | const DIR = path.join(os.tmpdir(), 'jest_playwright_global_setup');
7 |
8 | module.exports = async () => {
9 | await fs.remove(path.resolve(__dirname, '../temp'));
10 | const browserServer = await chromium.launchServer({
11 | headless: !process.env.VITE_DEBUG_SERVE,
12 | args: process.env.CI
13 | ? ['--no-sandbox', '--disable-setuid-sandbox']
14 | : undefined,
15 | });
16 |
17 | global.__BROWSER_SERVER__ = browserServer;
18 |
19 | await fs.mkdirp(DIR);
20 | await fs.writeFile(path.join(DIR, 'wsEndpoint'), browserServer.wsEndpoint());
21 | await fs.remove(path.resolve(__dirname, '../temp'));
22 | };
23 |
--------------------------------------------------------------------------------
/scripts/jestGlobalTeardown.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs-extra')
2 | const path = require('path')
3 |
4 | module.exports = async () => {
5 | await global.__BROWSER_SERVER__.close()
6 | if (!process.env.VITE_PRESERVE_BUILD_ARTIFACTS) {
7 | await fs.remove(path.resolve(__dirname, '../temp'))
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/scripts/jestPerTestSetup.ts:
--------------------------------------------------------------------------------
1 | import fs from 'fs-extra';
2 | import * as http from 'http';
3 | import * as path from 'path';
4 | import { resolve } from 'path';
5 | import { ConsoleMessage, Page } from 'playwright-chromium';
6 | import slash from 'slash';
7 | import {
8 | ViteDevServer,
9 | UserConfig,
10 | build,
11 | InlineConfig,
12 | ResolvedConfig,
13 | } from 'vite';
14 |
15 | import { preview } from '../packages/vitext/src/node/preview';
16 | import { createServer } from '../packages/vitext/src/node/server';
17 | import { resolveInlineConfig } from '../packages/vitext/src/node/utils';
18 |
19 | // injected by the test env
20 | declare global {
21 | namespace NodeJS {
22 | interface Global {
23 | page?: Page;
24 | viteTestUrl?: string;
25 | }
26 | }
27 | }
28 |
29 | const isBuildTest = !!process.env.VITE_TEST_BUILD;
30 |
31 | let server: ViteDevServer;
32 | let tempDir: string;
33 | let err: Error;
34 |
35 | const logs = ((global as any).browserLogs = []);
36 | const onConsole = (msg: ConsoleMessage) => {
37 | // @ts-ignore
38 | logs.push(msg.text());
39 | };
40 |
41 | beforeAll(async () => {
42 | const page = global.page;
43 | if (!page) {
44 | return;
45 | }
46 | try {
47 | page.on('console', onConsole);
48 |
49 | const testPath = expect.getState().testPath;
50 | const testName = slash(testPath).match(/playground\/([\w-]+)\//)?.[1];
51 |
52 | // if this is a test placed under playground/xxx/__tests__
53 | // start a vite server in that directory.
54 | if (testName) {
55 | const playgroundRoot = resolve(__dirname, '../packages/playground');
56 | const srcDir = resolve(playgroundRoot, testName);
57 | tempDir = resolve(__dirname, '../temp', testName);
58 | // tempDir = path.relative(
59 | // __dirname,
60 | // resolve(__dirname, '../temp', testName)
61 | // );
62 | try {
63 | fs.unlinkSync(tempDir);
64 | } catch {}
65 |
66 | fs.copySync(srcDir, tempDir, {
67 | dereference: true,
68 | errorOnExist: false,
69 | overwrite: true,
70 | filter(file) {
71 | file = slash(file);
72 | return (
73 | !file.includes('__tests__') &&
74 | !file.includes('node_modules') &&
75 | !file.match(/dist(\/|$)/)
76 | );
77 | },
78 | });
79 | modifyPackageName(path.join(tempDir, './package.json'));
80 |
81 | const options: UserConfig & { root: string } = {
82 | root: tempDir,
83 | logLevel: 'error',
84 | server: {
85 | watch: {
86 | // During tests we edit the files too fast and sometimes chokidar
87 | // misses change events, so enforce polling for consistency
88 | usePolling: true,
89 | interval: 100,
90 | },
91 | hmr: !isBuildTest,
92 | },
93 | build: {
94 | // skip transpilation and dynamic import polyfills during tests to
95 | // make it faster
96 | target: 'esnext',
97 | },
98 | };
99 | process.env.VITE_INLINE = 'inline-serve';
100 | process.env['NODE_ENV'] = 'development';
101 | if (isBuildTest) {
102 | process.env['NODE_ENV'] = 'production';
103 | let config = await resolveInlineConfig(
104 | { ...options, mode: 'production' },
105 | 'build'
106 | );
107 | await build(config as InlineConfig);
108 |
109 | config = (await resolveInlineConfig(
110 | { ...options, mode: 'production' },
111 | 'serve'
112 | )) as ResolvedConfig;
113 |
114 | server = await preview(config, {});
115 | } else {
116 | server = await createServer({
117 | ...options,
118 | mode: isBuildTest ? 'production' : 'development',
119 | });
120 | server = await server.listen();
121 | }
122 |
123 | const base = server.config.base === '/' ? '' : server.config.base;
124 | const url =
125 | (global.viteTestUrl = `http://localhost:${server.config.server.port}${base}`);
126 | await page.goto(url);
127 | }
128 | } catch (e) {
129 | // jest doesn't exit if our setup has error here
130 | // https://github.com/facebook/jest/issues/2713
131 | err = e;
132 | console.log(err);
133 | }
134 | }, 30000);
135 |
136 | afterAll(async () => {
137 | global.page && global.page.off('console', onConsole);
138 | if (server) {
139 | await server.close();
140 | }
141 | if (err) {
142 | throw err;
143 | }
144 | });
145 |
146 | function modifyPackageName(path: string) {
147 | const data: string = fs.readFileSync(path, 'utf-8');
148 | const parsedData = JSON.parse(data);
149 | parsedData.name = parsedData.name + '-test';
150 | fs.writeFileSync(path, JSON.stringify(parsedData), 'utf-8');
151 | }
152 |
--------------------------------------------------------------------------------
/scripts/release.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | /**
4 | * modified from https://github.com/vuejs/vue-next/blob/master/scripts/release.js
5 | */
6 | const execa = require('execa')
7 | const path = require('path')
8 | const fs = require('fs')
9 | const args = require('minimist')(process.argv.slice(2))
10 | const semver = require('semver')
11 | const chalk = require('chalk')
12 | const { prompt } = require('enquirer')
13 |
14 | const pkgDir = process.cwd()
15 | const pkgPath = path.resolve(pkgDir, 'package.json')
16 | /**
17 | * @type {{ name: string, version: string }}
18 | */
19 | const pkg = require(pkgPath)
20 | const pkgName = pkg.name.replace(/^@vitejs\//, '')
21 | const currentVersion = pkg.version
22 | /**
23 | * @type {boolean}
24 | */
25 | const isDryRun = args.dry
26 | /**
27 | * @type {boolean}
28 | */
29 | const skipBuild = args.skipBuild
30 |
31 | /**
32 | * @type {import('semver').ReleaseType[]}
33 | */
34 | const versionIncrements = [
35 | 'patch',
36 | 'minor',
37 | 'major',
38 | 'prepatch',
39 | 'preminor',
40 | 'premajor',
41 | 'prerelease'
42 | ]
43 |
44 | /**
45 | * @param {import('semver').ReleaseType} i
46 | */
47 | const inc = (i) => semver.inc(currentVersion, i)
48 |
49 | /**
50 | * @param {string} bin
51 | * @param {string[]} args
52 | * @param {object} opts
53 | */
54 | const run = (bin, args, opts = {}) =>
55 | execa(bin, args, { stdio: 'inherit', ...opts })
56 |
57 | /**
58 | * @param {string} bin
59 | * @param {string[]} args
60 | * @param {object} opts
61 | */
62 | const dryRun = (bin, args, opts = {}) =>
63 | console.log(chalk.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
64 |
65 | const runIfNotDry = isDryRun ? dryRun : run
66 |
67 | /**
68 | * @param {string} msg
69 | */
70 | const step = (msg) => console.log(chalk.cyan(msg))
71 |
72 | async function main() {
73 | let targetVersion = args._[0]
74 |
75 | if (!targetVersion) {
76 | // no explicit version, offer suggestions
77 | /**
78 | * @type {{ release: string }}
79 | */
80 | const { release } = await prompt({
81 | type: 'select',
82 | name: 'release',
83 | message: 'Select release type',
84 | choices: versionIncrements
85 | .map((i) => `${i} (${inc(i)})`)
86 | .concat(['custom'])
87 | })
88 |
89 | if (release === 'custom') {
90 | /**
91 | * @type {{ version: string }}
92 | */
93 | const res = await prompt({
94 | type: 'input',
95 | name: 'version',
96 | message: 'Input custom version',
97 | initial: currentVersion
98 | })
99 | targetVersion = res.version
100 | } else {
101 | targetVersion = release.match(/\((.*)\)/)[1]
102 | }
103 | }
104 |
105 | if (!semver.valid(targetVersion)) {
106 | throw new Error(`invalid target version: ${targetVersion}`)
107 | }
108 |
109 | const tag =
110 | pkgName === 'vite' ? `v${targetVersion}` : `${pkgName}@${targetVersion}`
111 |
112 | /**
113 | * @type {{ yes: boolean }}
114 | */
115 | const { yes } = await prompt({
116 | type: 'confirm',
117 | name: 'yes',
118 | message: `Releasing ${tag}. Confirm?`
119 | })
120 |
121 | if (!yes) {
122 | return
123 | }
124 |
125 | step('\nUpdating package version...')
126 | updateVersion(targetVersion)
127 |
128 | step('\nBuilding package...')
129 | if (!skipBuild && !isDryRun) {
130 | await run('yarn', ['build'])
131 | } else {
132 | console.log(`(skipped)`)
133 | }
134 |
135 | step('\nGenerating changelog...')
136 | await run('yarn', ['changelog'])
137 |
138 | const { stdout } = await run('git', ['diff'], { stdio: 'pipe' })
139 | if (stdout) {
140 | step('\nCommitting changes...')
141 | await runIfNotDry('git', ['add', '-A'])
142 | await runIfNotDry('git', ['commit', '-m', `release: ${tag}`])
143 | } else {
144 | console.log('No changes to commit.')
145 | }
146 |
147 | step('\nPublishing package...')
148 | await publishPackage(targetVersion, runIfNotDry)
149 |
150 | step('\nPushing to GitHub...')
151 | await runIfNotDry('git', ['tag', tag])
152 | await runIfNotDry('git', ['push', 'origin', `refs/tags/${tag}`])
153 | await runIfNotDry('git', ['push'])
154 |
155 | if (isDryRun) {
156 | console.log(`\nDry run finished - run git diff to see package changes.`)
157 | }
158 |
159 | console.log()
160 | }
161 |
162 | /**
163 | * @param {string} version
164 | */
165 | function updateVersion(version) {
166 | const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
167 | pkg.version = version
168 | fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
169 | }
170 |
171 | /**
172 | * @param {string} version
173 | * @param {Function} runIfNotDry
174 | */
175 | async function publishPackage(version, runIfNotDry) {
176 | const publicArgs = [
177 | 'publish',
178 | '--no-git-tag-version',
179 | '--new-version',
180 | version,
181 | '--access',
182 | 'public'
183 | ]
184 | if (args.tag) {
185 | publicArgs.push(`--tag`, args.tag)
186 | }
187 | try {
188 | await runIfNotDry('yarn', publicArgs, {
189 | stdio: 'pipe'
190 | })
191 | console.log(chalk.green(`Successfully published ${pkgName}@${version}`))
192 | } catch (e) {
193 | if (e.stderr.match(/previously published/)) {
194 | console.log(chalk.red(`Skipping already published: ${pkgName}`))
195 | } else {
196 | throw e
197 | }
198 | }
199 | }
200 |
201 | main().catch((err) => {
202 | console.error(err)
203 | })
204 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "moduleResolution": "node",
5 | "strict": true,
6 | "noUnusedLocals": false,
7 | "esModuleInterop": true,
8 | "jsx": "react",
9 | "module": "CommonJS" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
10 | "sourceMap": true /* Generates corresponding '.map' file. */,
11 | "skipLibCheck": true /* Skip type checking of declaration files. */,
12 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
13 | "preserveWatchOutput": true,
14 | "removeComments": false,
15 | "resolveJsonModule": true
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/workspace.code-workspace:
--------------------------------------------------------------------------------
1 | {
2 | "folders": [
3 | {
4 | "path": "."
5 | },
6 | {
7 | "path": "packages/playground/basic"
8 | }
9 | ],
10 | "settings": {
11 | "typescript.tsdk": "vitext/node_modules/typescript/lib",
12 | "typescript.enablePromptUseWorkspaceTsdk": true
13 | }
14 | }
--------------------------------------------------------------------------------