From 2dd0cdd802c8c863f6edb3d1060fb3648d097b77 Mon Sep 17 00:00:00 2001 From: kiacolbert Date: Sat, 2 Mar 2019 20:03:09 -0500 Subject: [PATCH 1/2] dom method changes --- src/browser/chrome/parser.js | 197 +++++++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 src/browser/chrome/parser.js diff --git a/src/browser/chrome/parser.js b/src/browser/chrome/parser.js new file mode 100644 index 0000000..640e8a1 --- /dev/null +++ b/src/browser/chrome/parser.js @@ -0,0 +1,197 @@ +// function parser() { +const esprima = require('esprima'); +const estraverse = require('estraverse'); +const escodegen = require('escodegen'); +const path = require('path'); +const _ = require('lodash'); +const fs = require('fs'); +const fetch = require('isomorphic-fetch'); + + +// react files +const useReducerfile = '/node_modules/react/cjs/react.development.js'; +const commitAllHostEffectsfile = '/node_modules/react-dom/cjs/react-dom.development.js'; + +// generated file names +const genReactDev = 'generatedReact.development.js'; +const genReactDom = 'generatedReact-dom.development.js'; + +// convert file to string and parse +function parseFile(file) { + const dir = path.join(__dirname, file); + const fileString = fs.readFile(dir, { encoding: 'utf-8' }); + const ast = esprima.parseModule(fileString); + return ast; +} +// declare functions to insert +// TODO: Un-comment timeTravelTracker +function useReducerReplacement() { + const dispatcher = resolveDispatcher(); + function reducerWithTracker(state, action) { + const newState = reducer(state, action); + // timeTravelTracker[timeTravelTracker.length - 1].actionDispatched = true; + window.postMessage({ + type: 'DISPATCH', + data: { + state: newState, + action, + }, + }); + return newState; + } + return dispatcher.useReducer(reducerWithTracker, initialArg, init); +} +function commitAllHostEffectsReplacement() { + while (nextEffect !== null) { + { + setCurrentFiber(nextEffect); + } + recordEffect(); + + let {effectTag} = nextEffect; + + if (effectTag & ContentReset) { + commitResetTextContent(nextEffect); + } + + if (effectTag & Ref) { + let current$$1 = nextEffect.alternate; + if (current$$1 !== null) { + commitDetachRef(current$$1); + } + } + + // The following switch statement is only concerned about placement, + // updates, and deletions. To avoid needing to add a case for every + // possible bitmap value, we remove the secondary effects from the + // effect tag and switch on that value. + let primaryEffectTag = effectTag & (Placement | Update | Deletion); + switch (primaryEffectTag) { + case Placement: + { + // editbyme + window.postMessage({ + type: 'EFFECT', + data: { + primaryEffectTag: 'PLACEMENT', + effect: _.cloneDeep(nextEffect), + }, + }); + + commitPlacement(nextEffect); + // Clear the "placement" from effect tag so that we know that this is inserted, before + // any life-cycles like componentDidMount gets called. + // TODO: findDOMNode doesn't rely on this any more but isMounted + // does and isMounted is deprecated anyway so we should be able + // to kill this. + nextEffect.effectTag &= ~Placement; + break; + } + case PlacementAndUpdate: + { + // Placement + commitPlacement(nextEffect); + // Clear the "placement" from effect tag so that we know that this is inserted, before + // any life-cycles like componentDidMount gets called. + nextEffect.effectTag &= ~Placement; + + // Update + let _current = nextEffect.alternate; + commitWork(_current, nextEffect); + break; + } + case Update: + { + // editbyme + window.postMessage({ + type: 'EFFECT', + data: { + primaryEffectTag: 'UPDATE', + effect: _.cloneDeep(nextEffect), + current: _.cloneDeep(nextEffect.alternate), + }, + }); + + let _current2 = nextEffect.alternate; + commitWork(_current2, nextEffect); + break; + } + case Deletion: + { + // editbyme + window.postMessage({ + type: 'EFFECT', + data: { + primaryEffectTag: 'DELETION', + effect: _.cloneDeep(nextEffect), + }, + }); + + commitDeletion(nextEffect); + break; + } + } + nextEffect = nextEffect.nextEffect; + } + + { + resetCurrentFiber(); + } +} + +// traverse ast to find method and replace body with our node's body +function traverseTree(replacementNode, functionName, ast) { + // let completed = false; + estraverse.replace(ast, { + enter(node) { + if (node.type === 'FunctionDeclaration') { + if (node.id.name === functionName) { + console.log('found', functionName); + node.body = replacementNode.body[0].body; + // completed = true; + } + } + }, + }); + // return completed; +} + +function generateFile(filename, ast) { + const code = escodegen.generate(ast); + fs.writeFileSync(filename, code, (err) => { + if (err) throw new Error(err.message); + }); +} + +const parseAndGenerate = () => { + // first file + // let ast = parseFile(useReducerfile); + fetch('https://unpkg.com/react-dom@16/umd/react-dom.development.js') + .then(r => r.text()) + .then((codeString) => { + console.log(codeString); + if (codeString.search('react')) { + console.log('react result', codeString.search('react')); + const ast = esprima.parseModule(codeString); + if (codeString.search('react-dom')) { + console.log('react-DOM result', codeString.search('react-dom')); + const injectableCommitAllHostEffects = esprima.parseScript(commitAllHostEffectsReplacement.toString()); + traverseTree(injectableCommitAllHostEffects, 'commitAllHostEffects', ast); + } else { + const injectableUseReducer = esprima.parseScript(useReducerReplacement.toString()); + traverseTree(injectableUseReducer, 'useReducer', ast); + } + const code = escodegen.generate(ast); + // console.log(code); + // return code; + fs.writeFileSync('dom.js', code, (err) => { + if (err) throw new Error(err.message); + }); + } + return -1; + }); +}; +parseAndGenerate(); + +// } +module.exports = parseAndGenerate; From e1b9f076a2acb2776aa62869afd632de3de9e9c1 Mon Sep 17 00:00:00 2001 From: kiacolbert Date: Sat, 2 Mar 2019 20:16:27 -0500 Subject: [PATCH 2/2] Removed file references. --- src/browser/chrome/parser.js | 74 ++++++++---------------------------- 1 file changed, 16 insertions(+), 58 deletions(-) diff --git a/src/browser/chrome/parser.js b/src/browser/chrome/parser.js index 640e8a1..904725c 100644 --- a/src/browser/chrome/parser.js +++ b/src/browser/chrome/parser.js @@ -2,27 +2,8 @@ const esprima = require('esprima'); const estraverse = require('estraverse'); const escodegen = require('escodegen'); -const path = require('path'); const _ = require('lodash'); -const fs = require('fs'); -const fetch = require('isomorphic-fetch'); - -// react files -const useReducerfile = '/node_modules/react/cjs/react.development.js'; -const commitAllHostEffectsfile = '/node_modules/react-dom/cjs/react-dom.development.js'; - -// generated file names -const genReactDev = 'generatedReact.development.js'; -const genReactDom = 'generatedReact-dom.development.js'; - -// convert file to string and parse -function parseFile(file) { - const dir = path.join(__dirname, file); - const fileString = fs.readFile(dir, { encoding: 'utf-8' }); - const ast = esprima.parseModule(fileString); - return ast; -} // declare functions to insert // TODO: Un-comment timeTravelTracker function useReducerReplacement() { @@ -141,57 +122,34 @@ function commitAllHostEffectsReplacement() { // traverse ast to find method and replace body with our node's body function traverseTree(replacementNode, functionName, ast) { - // let completed = false; estraverse.replace(ast, { enter(node) { if (node.type === 'FunctionDeclaration') { if (node.id.name === functionName) { - console.log('found', functionName); node.body = replacementNode.body[0].body; - // completed = true; } } }, }); - // return completed; -} - -function generateFile(filename, ast) { - const code = escodegen.generate(ast); - fs.writeFileSync(filename, code, (err) => { - if (err) throw new Error(err.message); - }); } -const parseAndGenerate = () => { - // first file - // let ast = parseFile(useReducerfile); - fetch('https://unpkg.com/react-dom@16/umd/react-dom.development.js') - .then(r => r.text()) - .then((codeString) => { - console.log(codeString); - if (codeString.search('react')) { - console.log('react result', codeString.search('react')); - const ast = esprima.parseModule(codeString); - if (codeString.search('react-dom')) { - console.log('react-DOM result', codeString.search('react-dom')); - const injectableCommitAllHostEffects = esprima.parseScript(commitAllHostEffectsReplacement.toString()); - traverseTree(injectableCommitAllHostEffects, 'commitAllHostEffects', ast); - } else { - const injectableUseReducer = esprima.parseScript(useReducerReplacement.toString()); - traverseTree(injectableUseReducer, 'useReducer', ast); - } - const code = escodegen.generate(ast); - // console.log(code); - // return code; - fs.writeFileSync('dom.js', code, (err) => { - if (err) throw new Error(err.message); - }); - } - return -1; - }); +const parseAndGenerate = (codeString) => { + if (codeString.search('react')) { + const ast = esprima.parseModule(codeString); + // parse react-dom code + if (codeString.search('react-dom')) { + const injectableCommitAllHostEffects = esprima.parseScript(commitAllHostEffectsReplacement.toString()); + traverseTree(injectableCommitAllHostEffects, 'commitAllHostEffects', ast); + } else { + // parse react code + const injectableUseReducer = esprima.parseScript(useReducerReplacement.toString()); + traverseTree(injectableUseReducer, 'useReducer', ast); + } + const code = escodegen.generate(ast); + return code; + } + return -1; }; -parseAndGenerate(); // } module.exports = parseAndGenerate;