Skip to content

Commit

Permalink
docs: write cra apps for ts examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@darthtrevino
darthtrevino committed Mar 27, 2019
1 parent c58d331 commit 3dc7539
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 106 deletions.
3 changes: 2 additions & 1 deletion packages/documentation/.gitignore
View file
Expand Up @@ -2,4 +2,5 @@

# Build directory
/public
/static/examples_js
/static/examples_js
/static/examples_ts
4 changes: 3 additions & 1 deletion packages/documentation/package.json
View file
Expand Up @@ -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",
Expand Down
258 changes: 154 additions & 104 deletions packages/documentation/write_sample_boilerplate.js
View file
@@ -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 (
<div className="App">
<DragDropContextProvider backend={HTML5Backend}>
<Example />
</DragDropContextProvider>
</div>
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, 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 = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
`

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) {
Expand All @@ -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)
Expand All @@ -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,
) {
Expand Down Expand Up @@ -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 (
<div className="App">
<DragDropContextProvider backend={HTML5Backend}>
<Example />
</DragDropContextProvider>
</div>
)
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(<App />, rootElement)
`,
)
})

const htmlFile = path.join(exampleDir, 'public/index.html')
fs.writeFileSync(
htmlFile,
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
`,
// 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,
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
`,
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`)
})
Expand Down

0 comments on commit 3dc7539

Please sign in to comment.