diff --git a/contributor-docs/adding-template.md b/contributor-docs/adding-template.md index 32933cee78a..75b1adc605f 100644 --- a/contributor-docs/adding-template.md +++ b/contributor-docs/adding-template.md @@ -110,7 +110,6 @@ In order to understand how this configuration works, we recommend you to take a Examples: -- [create-react-app-typescript](https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/eval/presets/create-react-app-typescript/index.js) (most basic one) - [CxJS](https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/eval/presets/cxjs/index.js) - [vue-cli](https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/eval/presets/vue-cli/index.js) diff --git a/packages/app/src/app/overmind/effects/utils/create-zip/create-react-app-typescript/files.zip b/packages/app/src/app/overmind/effects/utils/create-zip/create-react-app-typescript/files.zip deleted file mode 100644 index 8786261c74c..00000000000 Binary files a/packages/app/src/app/overmind/effects/utils/create-zip/create-react-app-typescript/files.zip and /dev/null differ diff --git a/packages/app/src/app/overmind/effects/utils/create-zip/create-react-app-typescript/index.ts b/packages/app/src/app/overmind/effects/utils/create-zip/create-react-app-typescript/index.ts deleted file mode 100644 index ea1f46ac3a5..00000000000 --- a/packages/app/src/app/overmind/effects/utils/create-zip/create-react-app-typescript/index.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { Sandbox, Module, Directory } from '@codesandbox/common/lib/types'; -// @ts-ignore -import files from 'buffer-loader!./files.zip'; // eslint-disable-line import/no-webpack-loader-syntax -import { createFile, createDirectoryWithFiles } from '../'; - -/** - * Add necessary scripts to package.json if they don't exist - * @param {*} module - */ -function alterPackageJSON(module: Module) { - try { - const parsed = JSON.parse(module.code); - - if (!parsed.scripts || !parsed.scripts.start) { - parsed.scripts = parsed.scripts || {}; - - parsed.scripts.start = parsed.scripts.start || 'react-scripts-ts start'; - parsed.scripts.build = parsed.scripts.build || 'react-scripts-ts build'; - parsed.scripts.test = - parsed.scripts.test || 'react-scripts-ts test --env=jsdom'; - parsed.scripts.eject = parsed.scripts.eject || 'react-scripts-ts eject'; - } - - if ( - !parsed.dependencies || - !parsed.dependencies['react-scripts-ts'] || - (!parsed.devDependencies || !parsed.devDependencies['react-scripts-ts']) - ) { - parsed.dependencies['react-scripts-ts'] = '^2.13.0'; - } - - return { ...module, code: JSON.stringify(parsed, null, 2) }; - } catch (e) { - return module; - } -} - -export default function createZip( - zip, - sandbox: Sandbox, - modules: Array, - directories: Array -) { - return zip.loadAsync(files).then(async src => { - await Promise.all( - modules - .filter(x => x.directoryShortid == null) - .filter(x => x.title !== 'yarn.lock' && x.title !== 'package-lock.json') - .map(x => { - if (x.title === 'package.json' && x.directoryShortid == null) { - return createFile(alterPackageJSON(x), src); - } - - return createFile(x, src); - }) - ); - - await Promise.all( - directories - .filter(x => x.directoryShortid == null) - .map(x => createDirectoryWithFiles(modules, directories, x, src)) - ); - }); -} diff --git a/packages/app/src/app/overmind/effects/utils/create-zip/index.ts b/packages/app/src/app/overmind/effects/utils/create-zip/index.ts index 997504f1956..c1389023cda 100644 --- a/packages/app/src/app/overmind/effects/utils/create-zip/index.ts +++ b/packages/app/src/app/overmind/effects/utils/create-zip/index.ts @@ -3,7 +3,6 @@ import { saveAs } from 'file-saver'; import { Sandbox, Module, Directory } from '@codesandbox/common/lib/types'; import { react, - reactTs, vue, preact, svelte, @@ -209,7 +208,6 @@ export async function createZip( if ( sandbox.template !== vue.name && - sandbox.template !== reactTs.name && directories.find(m => m.title === 'src' && m.directoryShortid == null) ) { // This is a full project, with all files already in there. We need to create @@ -219,10 +217,6 @@ export async function createZip( promise = import( /* webpackChunkName: 'create-react-app-zip' */ './create-react-app' ).then(generator => generator.default(zip, sandbox, modules, directories)); - } else if (sandbox.template === reactTs.name) { - promise = import( - /* webpackChunkName: 'create-react-app-typescript-zip' */ './create-react-app-typescript' - ).then(generator => generator.default(zip, sandbox, modules, directories)); } else if (sandbox.template === vue.name) { try { const packageJSONModule = sandbox.modules.find( diff --git a/packages/app/src/app/store/providers/Utils/create-zip/index.js b/packages/app/src/app/store/providers/Utils/create-zip/index.js index df56f71dfa1..9e63902ab42 100644 --- a/packages/app/src/app/store/providers/Utils/create-zip/index.js +++ b/packages/app/src/app/store/providers/Utils/create-zip/index.js @@ -5,7 +5,6 @@ import { saveAs } from 'file-saver'; import type { Sandbox, Module, Directory } from '@codesandbox/common/lib/types'; import { react, - reactTs, vue, preact, svelte, @@ -209,7 +208,6 @@ export async function createZip( if ( sandbox.template !== vue.name && - sandbox.template !== reactTs.name && directories.find(m => m.title === 'src' && m.directoryShortid == null) ) { // This is a full project, with all files already in there. We need to create @@ -221,12 +219,6 @@ export async function createZip( ).then(generator => generator.default(zip, sandbox, modules, directories, downloadBlobs) ); - } else if (sandbox.template === reactTs.name) { - promise = import( - /* webpackChunkName: 'create-react-app-typescript-zip' */ './create-react-app-typescript' - ).then(generator => - generator.default(zip, sandbox, modules, directories, downloadBlobs) - ); } else if (sandbox.template === vue.name) { try { const packageJSONModule = sandbox.modules.find( diff --git a/packages/app/src/sandbox/eval/index.js b/packages/app/src/sandbox/eval/index.js index 14e8e661bfc..f80ca35e9d6 100644 --- a/packages/app/src/sandbox/eval/index.js +++ b/packages/app/src/sandbox/eval/index.js @@ -5,7 +5,6 @@ import { parcel, svelte, preact, - reactTs, angular, cxjs, babel, @@ -15,7 +14,6 @@ import { } from '@codesandbox/common/lib/templates'; import reactPreset from './presets/create-react-app'; -import reactTsPreset from './presets/create-react-app-typescript'; import vuePreset from './presets/vue-cli'; import preactPreset from './presets/preact-cli'; import sveltePreset from './presets/svelte'; @@ -31,8 +29,6 @@ export default function getPreset(template: string) { switch (template) { case react.name: return reactPreset(); - case reactTs.name: - return reactTsPreset(); case reason.name: return reasonPreset(); case vue.name: diff --git a/packages/app/src/sandbox/eval/presets/create-react-app-typescript/index.js b/packages/app/src/sandbox/eval/presets/create-react-app-typescript/index.js deleted file mode 100644 index 81cc4bc7b83..00000000000 --- a/packages/app/src/sandbox/eval/presets/create-react-app-typescript/index.js +++ /dev/null @@ -1,85 +0,0 @@ -import Preset from '../'; - -import stylesTranspiler from '../../transpilers/style'; -import jsonTranspiler from '../../transpilers/json'; -import rawTranspiler from '../../transpilers/raw'; -import babelTranspiler from '../../transpilers/babel'; - -export default function initialize() { - const preset = new Preset('create-react-app-typescript', [ - 'web.ts', - 'ts', - 'json', - 'web.tsx', - 'tsx', - 'js', - ]); - - preset.registerTranspiler(module => /\.css$/.test(module.path), [ - { transpiler: stylesTranspiler }, - ]); - - const babelOptions = { - isV7: true, - compileNodeModulesWithEnv: true, - config: { - plugins: [ - 'transform-flow-strip-types', - 'transform-destructuring', - 'babel-plugin-macros', - ['proposal-decorators', { legacy: true }], - ['proposal-class-properties', { loose: true }], - ['proposal-object-rest-spread', { useBuiltIns: true }], - [ - 'transform-runtime', - { - corejs: false, - helpers: true, - regenerator: true, - }, - ], - 'syntax-dynamic-import', - ], - presets: [ - [ - 'env', - { - // We want Create React App to be IE 9 compatible until React itself - // no longer works with IE 9 - targets: { - ie: 9, - }, - // Users cannot override this behavior because this Babel - // configuration is highly tuned for ES5 support - ignoreBrowserslistConfig: true, - // If users import all core-js they're probably not concerned with - // bundle size. We shouldn't rely on magic to try and shrink it. - useBuiltIns: false, - // Do not transform modules to CJS - modules: false, - }, - ], - 'react', - 'typescript', - ], - }, - }; - preset.registerTranspiler( - module => /\.(t|j)sx?$/.test(module.path) && !module.path.endsWith('.d.ts'), - [ - { - transpiler: babelTranspiler, - options: babelOptions, - }, - ], - true - ); - - preset.registerTranspiler(module => /\.json$/.test(module.path), [ - { transpiler: jsonTranspiler }, - ]); - - preset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]); - - return preset; -} diff --git a/packages/app/src/sandbox/eval/tests/jest-lite.ts b/packages/app/src/sandbox/eval/tests/jest-lite.ts index 5e1a0fa6d19..4f3ce77cb45 100644 --- a/packages/app/src/sandbox/eval/tests/jest-lite.ts +++ b/packages/app/src/sandbox/eval/tests/jest-lite.ts @@ -1,5 +1,5 @@ import { dispatch, actions, listen } from 'codesandbox-api'; -import { react, reactTs } from '@codesandbox/common/lib/templates'; +import { react } from '@codesandbox/common/lib/templates'; import expect from 'jest-matchers'; import jestMock from 'jest-mock'; import jestTestHooks from 'jest-circus'; @@ -248,8 +248,6 @@ export default class TestRunner { this.manager.resolveModule('./src/setupTests.ts', '/'), ]; } - } else if (this.manager.preset.name === reactTs.name) { - testModules = [this.manager.resolveModule('./src/setupTests.ts', '/')]; } else if (this.manager.configurations.package) { const { parsed } = this.manager.configurations.package; diff --git a/packages/common/src/templates/configuration/tsconfig/index.ts b/packages/common/src/templates/configuration/tsconfig/index.ts index 9627165ad36..1e33e99fff6 100644 --- a/packages/common/src/templates/configuration/tsconfig/index.ts +++ b/packages/common/src/templates/configuration/tsconfig/index.ts @@ -15,42 +15,6 @@ const config: ConfigurationFile = { template: string, resolveModule: (path: string) => { code: string } | undefined ) => { - if (template === 'create-react-app-typescript') { - return JSON.stringify( - { - compilerOptions: { - outDir: 'build/dist', - module: 'esnext', - target: 'es5', - lib: ['es6', 'dom'], - sourceMap: true, - allowJs: true, - jsx: 'react', - moduleResolution: 'node', - rootDir: 'src', - forceConsistentCasingInFileNames: true, - noImplicitReturns: true, - noImplicitThis: true, - noImplicitAny: true, - strictNullChecks: true, - suppressImplicitAnyIndexErrors: true, - noUnusedLocals: true, - }, - exclude: [ - 'node_modules', - 'build', - 'scripts', - 'acceptance-tests', - 'webpack', - 'jest', - 'src/setupTests.ts', - ], - }, - null, - 2 - ); - } - if (template === 'parcel') { const tsconfig = { compilerOptions: { diff --git a/packages/common/src/templates/icons.ts b/packages/common/src/templates/icons.ts index bcbd7cc96c7..a39840b362b 100644 --- a/packages/common/src/templates/icons.ts +++ b/packages/common/src/templates/icons.ts @@ -30,7 +30,6 @@ import { ember, vue, preact, - reactTs, svelte, angular, parcel, @@ -72,8 +71,6 @@ export default function getIcon(theme: TemplateType): ReturnedIcon { return Vue; case preact.name: return Preact; - case reactTs.name: - return React; case svelte.name: return Svelte; case angular.name: diff --git a/packages/common/src/templates/index.ts b/packages/common/src/templates/index.ts index a613a2c6f0e..259b45f89cf 100644 --- a/packages/common/src/templates/index.ts +++ b/packages/common/src/templates/index.ts @@ -5,7 +5,6 @@ import parcel from './parcel'; import preact from './preact'; import reason from './reason'; import react from './react'; -import reactTs from './react-ts'; import svelte from './svelte'; import vue from './vue'; import ember from './ember'; @@ -43,7 +42,6 @@ export { parcel, preact, react, - reactTs, reason, svelte, vue, @@ -64,7 +62,6 @@ export type TemplateType = | 'vue-cli' | 'preact-cli' | 'svelte' - | 'create-react-app-typescript' | 'angular-cli' | 'parcel' | 'cxjs' @@ -94,8 +91,6 @@ export default function getDefinition(theme: TemplateType) { return vue; case preact.name: return preact; - case reactTs.name: - return reactTs; case svelte.name: return svelte; case angular.name: diff --git a/packages/common/src/templates/react-ts.ts b/packages/common/src/templates/react-ts.ts deleted file mode 100644 index 2cadcdc6b89..00000000000 --- a/packages/common/src/templates/react-ts.ts +++ /dev/null @@ -1,19 +0,0 @@ -import configurations from './configuration'; - -import Template from './template'; -import { decorateSelector } from '../theme'; - -export default new Template( - 'create-react-app-typescript', - 'React + TS', - 'https://github.com/wmonk/create-react-app-typescript', - 'react-ts', - decorateSelector(() => '#009fff'), - { - isTypescript: true, - showOnHomePage: false, - extraConfigurations: { - '/tsconfig.json': configurations.tsconfig, - }, - } -); diff --git a/packages/react-embed/src/SandboxEmbed/SandboxEmbed.tsx b/packages/react-embed/src/SandboxEmbed/SandboxEmbed.tsx index ae2c3b0f135..482bb288dd0 100644 --- a/packages/react-embed/src/SandboxEmbed/SandboxEmbed.tsx +++ b/packages/react-embed/src/SandboxEmbed/SandboxEmbed.tsx @@ -44,7 +44,7 @@ export interface CodeSandboxerProps { * Allow codesandboxer to accept more extensions like .jsx **/ extensions?: string[]; - template?: 'create-react-app' | 'create-react-app-typescript'; + template?: 'create-react-app'; } export interface Props { diff --git a/packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx b/packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx index eefe0b9cf6a..8f5885da35f 100644 --- a/packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx +++ b/packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx @@ -37,7 +37,6 @@ export interface Props { skipEval?: boolean; template?: | 'create-react-app' - | 'create-react-app-typescript' | 'parcel' | 'vue-cli' | 'angular-cli'