morten-olsen.github.io/bin/resources/react/index.ts

import vm from 'vm';
import React, { ComponentType } from 'react';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import sucrase from '@rollup/plugin-sucrase';
import alias from '@rollup/plugin-alias';
import externalGlobals from 'rollup-plugin-external-globals';
import { createScript } from '../script';
import orgStyled from 'styled-components';
import * as styledExports from 'styled-components';
import ReactHelmetAsync from 'react-helmet-async';
import { resolve } from 'path';

const styled = orgStyled.bind(null);
for (let key of Object.keys(orgStyled)) {
  if (key === 'default') {
    continue;
  }
  (styled as any)[key] = (orgStyled as any)[key];
}
for (let key of Object.keys(styledExports)) {
  if (key === 'default') {
    continue;
  }
  (styled as any)[key] = (styledExports as any)[key];
}

const createReact = <TProps = any>(path: string) => {
  const script = createScript({
    path,
    format: 'cjs',
    plugins: [
      replace({
        preventAssignment: true,
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      alias({
        entries: [{ find: '@', replacement: resolve('content/templates/react') }],
      }),
      sucrase({
        exclude: ['node_modules/**'],
        transforms: ['jsx', 'typescript'],
      }),
      nodeResolve({
        browser: true,
        preferBuiltins: false,
        extensions: ['.js', '.ts', '.tsx'],
      }),
      json(),
      commonjs({
        include: /node_modules/,
      }),
      externalGlobals({
        react: 'React',
        'styled-components': 'StyledComponents',
        'react-helmet-async': 'ReactHelmetAsync',
      }),
    ],
  });
  const template = script.pipe<ComponentType<TProps>>(async () => {
    const scriptContent = await script.data;
    const exports: any = {};
    const module = { exports };
    const globals = {
      module,
      exports,
      React,
      StyledComponents: styled,
      ReactHelmetAsync,
    };
    vm.runInNewContext(scriptContent, globals);
    return module.exports;
  });

  return template;
};

export { createReact };