vite#Transform TypeScript Examples

The following examples show how to use vite#Transform. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: transform.ts    From vite-plugin-react with MIT License 5 votes vote down vote up 
reactRefreshTransform: Transform = {
  test: ({ path, isBuild }) => {
    if (!/\.(t|j)sx?$/.test(path)) {
      return false
    }
    if (isBuild || process.env.NODE_ENV === 'production') {
      // do not transform for production builds
      return false
    }
    if (isDependency(path) && !path.endsWith('x')) {
      // do not transform if this is a dep and is not jsx/tsx
      return false
    }
    return true
  },

  transform: ({ code, path }) => {
    const result = require('@babel/core').transformSync(code, {
      plugins: [
        require('@babel/plugin-syntax-import-meta'),
        require('react-refresh/babel')
      ],
      ast: true,
      sourceMaps: true,
      sourceFileName: path
    })

    if (!/\$RefreshReg\$\(/.test(result.code)) {
      // no component detected in the file
      return code
    }

    const header = `
  import RefreshRuntime from "${runtimePublicPath}";

  let prevRefreshReg;
  let prevRefreshSig;

  if (!window.__vite_plugin_react_preamble_installed__) {
    throw new Error(
      "vite-plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"
    );
  }

  if (import.meta.hot) {
    prevRefreshReg = window.$RefreshReg$;
    prevRefreshSig = window.$RefreshSig$;
    window.$RefreshReg$ = (type, id) => {
      RefreshRuntime.register(type, ${JSON.stringify(path)} + " " + id)
    };
    window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
  }`.replace(/[\n]+/gm, '')

    const footer = `
  if (import.meta.hot) {
    window.$RefreshReg$ = prevRefreshReg;
    window.$RefreshSig$ = prevRefreshSig;

    ${isRefreshBoundary(result.ast) ? `import.meta.hot.accept();` : ``}
    if (!window.__vite_plugin_react_timeout) {
      window.__vite_plugin_react_timeout = setTimeout(() => {
        window.__vite_plugin_react_timeout = 0;
        RefreshRuntime.performReactRefresh();
      }, 30);
    }
  }`

    return {
      code: `${header}${result.code}${footer}`,
      map: result.map
    }
  }
}