|
| 1 | +import * as babylon from 'babylon'; |
| 2 | +import * as prettier from 'prettier'; |
| 3 | +import * as fs from 'fs'; |
| 4 | +import * as path from 'path'; |
| 5 | + |
| 6 | +// recast and jscodeshift have no @types :( |
| 7 | + const recast: Recast = require('recast'); |
| 8 | + const jscodeshift: { |
| 9 | + withParser: (parser: string) => JSCodeShift; |
| 10 | + } = require('jscodeshift'); |
| 11 | + |
| 12 | +import { Recast, JSCodeShift, IASTPath, IASTSpecifier, IASTNode } from './interfaces'; |
| 13 | + |
| 14 | + |
| 15 | +// These files are copied to lib in the pre-copy step (see config/pre-copy.json) |
| 16 | +const exampleDataFiles = { |
| 17 | + exampleData: { name: 'exampleData', contents: '' }, |
| 18 | + testImages: { name: 'TestImages', contents: '' }, |
| 19 | + peopleExampleData: { name: 'PeopleExampleData', contents: '' } |
| 20 | +}; |
| 21 | + |
| 22 | +const exampleDataRegex = new RegExp( |
| 23 | + Object.values(exampleDataFiles) |
| 24 | + // tslint:disable-next-line:typedef |
| 25 | + .map(fileInfo => `\\b${fileInfo.name}\\b`) |
| 26 | + .join('|') + '$' |
| 27 | +); |
| 28 | + |
| 29 | +for (const fileInfo of Object.values(exampleDataFiles)) { |
| 30 | + // Read each file and remove all export statements (to avoid confusing the logic later that |
| 31 | + // determines which exported thing is the actual example component) |
| 32 | + let contents = fs |
| 33 | + .readFileSync(path.resolve(__dirname, '../lib', fileInfo.name + '.ts')) |
| 34 | + .toString(); |
| 35 | + |
| 36 | + // Strip the first few lines of comments from the files--they all have notes at the top which |
| 37 | + // don't need to be in the resulting codepen |
| 38 | + while (contents.startsWith('//')) { |
| 39 | + contents = contents.replace(/^.*?\r?\n/, ''); |
| 40 | + } |
| 41 | + // Hack to quickly get rid of exports |
| 42 | + contents = contents.replace(/^export /gm, ''); |
| 43 | + fileInfo.contents = contents; |
| 44 | +} |
| 45 | + |
| 46 | +const j = jscodeshift.withParser('babylon'); |
| 47 | + |
| 48 | +const parse = (source: string) => |
| 49 | + babylon.parse(source, { |
| 50 | + sourceType: 'module', |
| 51 | + plugins: ['jsx', 'typescript', 'classProperties', 'objectRestSpread'] |
| 52 | + }); |
| 53 | + |
| 54 | +export function transformExample(file: string): string { |
| 55 | + let sourceStr = file; |
| 56 | + |
| 57 | + // If example data files were imported, append the file contents |
| 58 | + for (const fileInfo of Object.values(exampleDataFiles)) { |
| 59 | + if (file.includes(`/${fileInfo.name}'`)) { |
| 60 | + sourceStr += `\n${fileInfo.contents}\n`; |
| 61 | + } |
| 62 | + } |
| 63 | + |
| 64 | + const source = j(recast.parse(sourceStr, { parser: { parse } })); |
| 65 | + |
| 66 | + // Make a list of imported identifiers, and remove all imports |
| 67 | + const identifiers: string[] = []; |
| 68 | + source.find(j.ImportDeclaration).forEach((p: IASTPath) => { |
| 69 | + const importPath = p.node.source.value; |
| 70 | + // Ignore identifiers from: |
| 71 | + // - the React import (which will be a global) |
| 72 | + // - css/scss |
| 73 | + // - example data files which will be appended if needed |
| 74 | + if ( |
| 75 | + importPath !== 'react' && |
| 76 | + !/\.s?css$/.test(importPath) && |
| 77 | + !exampleDataRegex.test(importPath) |
| 78 | + ) { |
| 79 | + p.node.specifiers.forEach((spec: IASTSpecifier) => { |
| 80 | + identifiers.push(spec.local.loc.identifierName); |
| 81 | + }); |
| 82 | + } |
| 83 | + |
| 84 | + // Remove the import |
| 85 | + p.prune(); |
| 86 | + }); |
| 87 | + |
| 88 | + let exampleName; |
| 89 | + // remove exports and replace with variable or class declarations, whichever the original example used |
| 90 | + source |
| 91 | + .find( |
| 92 | + j.ExportNamedDeclaration, |
| 93 | + (node: IASTNode) => |
| 94 | + node.declaration.type === 'VariableDeclaration' || |
| 95 | + node.declaration.type === 'FunctionDeclaration' |
| 96 | + ) |
| 97 | + .replaceWith((p: IASTPath) => { |
| 98 | + if (p.node.declaration.type === 'VariableDeclaration') { |
| 99 | + exampleName = p.node.declaration.declarations[0].id.name; |
| 100 | + } |
| 101 | + return p.node.declaration; |
| 102 | + }); |
| 103 | + |
| 104 | + source |
| 105 | + .find( |
| 106 | + j.ExportNamedDeclaration, |
| 107 | + (node: IASTNode) => |
| 108 | + node.declaration.type === 'ClassDeclaration' || |
| 109 | + node.declaration.type === 'TSInterfaceDeclaration' |
| 110 | + ) |
| 111 | + .replaceWith((p: IASTPath) => { |
| 112 | + if (p.node.declaration.type === 'ClassDeclaration') { |
| 113 | + exampleName = p.node.declaration.id.name; |
| 114 | + } |
| 115 | + console.log(p.node.declaration) |
| 116 | + return p.node.declaration; |
| 117 | + }); |
| 118 | + |
| 119 | + let attachedWindowString = 'const {'; |
| 120 | + if (identifiers.length > 0) { |
| 121 | + attachedWindowString += identifiers.join(',') + ','; |
| 122 | + } |
| 123 | + attachedWindowString += 'Fabric} = window.Fabric;\n'; |
| 124 | + |
| 125 | + // add imports and React render footer (with the component wrapped in a <Fabric> for styling) |
| 126 | + const sourceWithFooter = [ |
| 127 | + attachedWindowString, |
| 128 | + source.toSource(), |
| 129 | + `ReactDOM.render(<Fabric><${exampleName}/></Fabric>, document.getElementById("content"));` |
| 130 | + ].join('\n'); |
| 131 | + |
| 132 | + return sourceWithFooter; |
| 133 | +} |
0 commit comments