From 3dc75393a6090a99dca39a4eb42c90ff97533f31 Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Wed, 27 Mar 2019 12:13:27 -0700 Subject: [PATCH] docs: write cra apps for ts examples --- packages/documentation/.gitignore | 3 +- packages/documentation/package.json | 4 +- .../documentation/write_sample_boilerplate.js | 258 +++++++++++------- 3 files changed, 159 insertions(+), 106 deletions(-) diff --git a/packages/documentation/.gitignore b/packages/documentation/.gitignore index 230162706f..315dfc7dbf 100644 --- a/packages/documentation/.gitignore +++ b/packages/documentation/.gitignore @@ -2,4 +2,5 @@ # Build directory /public -/static/examples_js \ No newline at end of file +/static/examples_js +/static/examples_ts \ No newline at end of file diff --git a/packages/documentation/package.json b/packages/documentation/package.json index e355d95976..2a9a980cf4 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -49,7 +49,9 @@ "scripts": { "clean": "rimraf .cache public apidocs static/examples_js", "start": "gatsby develop", - "copy_example_source": "cp -r ../examples/lib/docs static/examples_js", + "copy_example_source:js": "cp -r ../examples/lib/docs static/examples_js", + "copy_example_source:ts": "cp -r ../examples/src static/examples_ts", + "copy_example_source": "run-s copy_example_source:*", "format_example_source": "prettier 'static/examples_js/**/*.js*' --use-tabs=false --write", "write_example_boilerplate": "node write_sample_boilerplate.js", "process_examples": "run-s copy_example_source format_example_source write_example_boilerplate", diff --git a/packages/documentation/write_sample_boilerplate.js b/packages/documentation/write_sample_boilerplate.js index abda5e52e8..5b148e868f 100644 --- a/packages/documentation/write_sample_boilerplate.js +++ b/packages/documentation/write_sample_boilerplate.js @@ -1,7 +1,102 @@ const fs = require('fs') const path = require('path') -function walk_examples(dir, done) { +const APP_FILE_CONTENT = ` + import React from 'react' + import ReactDOM from 'react-dom' + import Example from './example' + import { DragDropContextProvider } from 'react-dnd' + import HTML5Backend from 'react-dnd-html5-backend' + + function App() { + return ( +
+ + + +
+ ) + } + + const rootElement = document.getElementById('root') + ReactDOM.render(, rootElement) +` + +const MANIFEST_FILE_CONTENT = ` +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +}` + +const HTML_FILE_CONTENT = ` + + + + + + + + + React App + + + +
+ + +` + +const makePackageJson = (index, isTS) => { + const result = { + name: `react-dnd-example-${index}`, + main: `src/index.${isTS ? 'tsx' : 'js'}`, + description: 'auto-generated package for codesandbox import', + private: true, + version: '0.0.0', + scripts: { + start: 'react-scripts start', + build: 'react-scripts build', + test: 'react-scripts test --env=jsdom', + eject: 'react-scripts eject', + }, + dependencies: { + react: '16.8.4', + 'react-dom': '16.8.4', + 'react-scripts': '2.1.8', + 'react-dnd': '*', + 'react-dnd-html5-backend': '*', + 'babel-jest': '23.6.0', + }, + browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'], + } + if (isTS) { + result.dependencies = { + ...result.dependencies, + typescript: '^3.3.3333', + '@types/react': '^16.8.7', + '@types/react-dom': '^16.8.2', + '@types/jest': '^24.0.9', + '@types/node': '^11.12.0', + } + } + return result +} + +function walk_examples(dir, look_for, done) { var results = [] fs.readdir(dir, (err, list) => { if (err) { @@ -18,12 +113,12 @@ function walk_examples(dir, done) { fs.stat(file, (err, stat) => { if (stat && stat.isDirectory()) { - walk_examples(file, (err, res) => { + walk_examples(file, look_for, (err, res) => { results = results.concat(res) if (!--pending) done(null, results) }) } else { - if (file.endsWith('index.jsx')) { + if (file.endsWith(look_for)) { results.push(file) } if (!--pending) done(null, results) @@ -33,7 +128,8 @@ function walk_examples(dir, done) { }) } -walk_examples(path.join(__dirname, 'static/examples_js'), function( +// Write JS Examples +walk_examples(path.join(__dirname, 'static/examples_js'), 'index.jsx', function( err, results, ) { @@ -64,114 +160,68 @@ walk_examples(path.join(__dirname, 'static/examples_js'), function( ) const packageJsonFile = path.join(exampleDir, 'package.json') - fs.writeFileSync( - packageJsonFile, - `{ - "name": "react-dnd-example-${index}", - "main": "src/index.js", - "description": "auto-generated package for codesandbox import", - "private": true, - "version": "0.0.0", - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - }, - "dependencies": { - "react": "16.8.4", - "react-dom": "16.8.4", - "react-scripts": "2.1.8", - "react-dnd": "*", - "react-dnd-html5-backend": "*", - "babel-jest": "23.6.0" - }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] - } - `, - ) + fs.writeFileSync(packageJsonFile, JSON.stringify(makePackageJson(index))) - const sandboxAppFile = path.join(exampleDir, 'src/index.js') - fs.writeFileSync( - sandboxAppFile, - ` - import React from 'react' - import ReactDOM from 'react-dom' - import Example from './example' - import { DragDropContextProvider } from 'react-dnd' - import HTML5Backend from 'react-dnd-html5-backend' - - function App() { - return ( -
- - - -
- ) + const sandboxAppFile = path.join(srcDir, 'index.js') + fs.writeFileSync(sandboxAppFile, APP_FILE_CONTENT) + + const htmlFile = path.join(publicDir, 'index.html') + fs.writeFileSync(htmlFile, HTML_FILE_CONTENT) + + const manifestFile = path.join(publicDir, 'manifest.json') + fs.writeFileSync(manifestFile, MANIFEST_FILE_CONTENT) + + const envFile = path.join(exampleDir, '.env') + fs.writeFileSync(envFile, `SKIP_PREFLIGHT_CHECK = true`) + }) +}) + +// Write TS Examples +walk_examples(path.join(__dirname, 'static/examples_ts'), 'index.tsx', function( + err, + results, +) { + if (err) throw err + results.forEach((exampleIndex, index) => { + const exampleDir = path.dirname(exampleIndex) + console.log('processing example', exampleDir) + + // Move example code into `src` + const srcDir = path.join(exampleDir, 'src') + const publicDir = path.join(exampleDir, 'public') + fs.mkdirSync(srcDir, { recursive: true }) + fs.mkdirSync(publicDir, { recursive: true }) + + const exampleFiles = fs.readdirSync(exampleDir) + exampleFiles.forEach(file => { + if (file.endsWith('.ts') || file.endsWith('.tsx')) { + const sourcePath = path.join(exampleDir, file) + const targetPath = path.join(srcDir, file) + fs.renameSync(sourcePath, targetPath) } - - const rootElement = document.getElementById('root') - ReactDOM.render(, rootElement) - `, - ) + }) - const htmlFile = path.join(exampleDir, 'public/index.html') - fs.writeFileSync( - htmlFile, - ` - - - - - - - - - React App - - - -
- - - `, + // Rename index.jsx to example.jsx. Reserve index. for the bootstrapping codes + fs.renameSync( + path.join(srcDir, 'index.tsx'), + path.join(srcDir, 'example.tsx'), ) - const manifestFile = path.join(exampleDir, 'public/manifest.json') + const packageJsonFile = path.join(exampleDir, 'package.json') fs.writeFileSync( - manifestFile, - ` - - - - - - - - - React App - - - -
- - - - `, + packageJsonFile, + JSON.stringify(makePackageJson(index, true)), ) + const sandboxAppFile = path.join(srcDir, 'index.tsx') + fs.writeFileSync(sandboxAppFile, APP_FILE_CONTENT) + + const htmlFile = path.join(publicDir, 'index.html') + fs.writeFileSync(htmlFile, HTML_FILE_CONTENT) + + const manifestFile = path.join(publicDir, 'manifest.json') + fs.writeFileSync(manifestFile, MANIFEST_FILE_CONTENT) + const envFile = path.join(exampleDir, '.env') fs.writeFileSync(envFile, `SKIP_PREFLIGHT_CHECK = true`) })