linc-profile-generic-react
Advanced tools
Comparing version 0.9.7 to 0.10.0-0
@@ -6,149 +6,63 @@ 'use strict'; | ||
const path = require('path'); | ||
const fs = require('fs-extra'); | ||
const webpack = require('webpack'); | ||
const server_config = require('../webpack/webpack.config.server.js'); | ||
const client_config = require('../webpack/webpack.config.client.js'); | ||
const semver = require('semver'); | ||
const createStrategy = require('./strategy'); | ||
const generateServerStrategy = require('./generateServerStrategy'); | ||
const generateClient = require('./generateClient'); | ||
const PROJECT_DIR = process.cwd(); | ||
const packageJson = require(path.resolve(PROJECT_DIR, 'package.json')); | ||
const mapValues = (obj, iterator) => { | ||
const keys = Object.keys(obj); | ||
const mapped = {}; | ||
keys.forEach(key => { | ||
mapped[key] = iterator(obj[key], key, obj); | ||
}); | ||
return mapped; | ||
const keys = Object.keys(obj); | ||
const mapped = {}; | ||
keys.forEach(key => { | ||
mapped[key] = iterator(obj[key], key, obj); | ||
}); | ||
return mapped; | ||
}; | ||
const getDependencies = () => { | ||
const packageJson = require(path.resolve(PROJECT_DIR, 'package.json')); | ||
const nodeModuleDir = path.resolve(PROJECT_DIR, 'node_modules'); | ||
const deps = Object.assign({}, packageJson.dependencies, packageJson.devDependencies); | ||
return mapValues(deps, (_, name) => { | ||
const pjf = path.resolve(nodeModuleDir, name, 'package.json'); | ||
const pj = require(pjf); | ||
return pj.version; | ||
}); | ||
const nodeModuleDir = path.resolve(PROJECT_DIR, 'node_modules'); | ||
const deps = Object.assign({}, packageJson.dependencies, packageJson.devDependencies); | ||
return mapValues(deps, (_, name) => { | ||
const pjf = path.resolve(nodeModuleDir, name, 'package.json'); | ||
const pj = require(pjf); | ||
return pj.version; | ||
}); | ||
}; | ||
const pickMatch = (deps, config) => { | ||
if (deps['react-router']) { | ||
if (semver.lt(deps['react-router'], '4.0.0')) { | ||
return 'react-router-v3'; | ||
} else { | ||
console.log('Do not support react-routerV4 just yet'); | ||
return 'react-router-v4'; | ||
} | ||
} | ||
const runWebpack = config => { | ||
return new Promise((resolve, reject) => { | ||
webpack(config, (err, stats) => { | ||
if (err) return reject(err); | ||
const errors = stats.toJson('errors-only').errors.toString(); | ||
if (errors) return reject(errors); | ||
resolve(); | ||
}); | ||
}); | ||
}; | ||
const pickStatePromise = (deps, config) => { | ||
if (deps['redux']) { | ||
return 'promiseCounter'; | ||
} | ||
}; | ||
const pickWrapInStoreHoC = (deps, config) => { | ||
if (deps['react-redux']) { | ||
return 'react-redux'; | ||
} | ||
}; | ||
const pickafterRender = (deps, config) => { | ||
const afterRender = []; | ||
if (deps['react-helmet']) { | ||
afterRender.push('react-helmet'); | ||
} | ||
return afterRender; | ||
}; | ||
const pickCreateStore = (deps, config) => { | ||
if (deps.redux) { | ||
return 'redux'; | ||
} | ||
}; | ||
const createStrategy = (deps, config) => { | ||
const strategy = {}; | ||
strategy.match = pickMatch(deps, config); | ||
strategy.renderToString = 'react'; | ||
strategy.getStatePromiseFromRoute = pickStatePromise(deps, config); | ||
strategy.wrapInStoreHoC = pickWrapInStoreHoC(deps, config); | ||
strategy.afterRender = pickafterRender(deps, config); | ||
strategy.createStore = pickCreateStore(deps, config); | ||
return strategy; | ||
}; | ||
const createServerStrategyCode = strategy => { | ||
const variableName = 'strategy'; | ||
const requires = mapValues(strategy, (value, key) => { | ||
if (typeof value === 'string') { | ||
const requireFile = path.resolve(__dirname, value); | ||
return `${variableName}['${key}'] = require('${requireFile}').${key}.fn;`; | ||
} else if (Array.isArray(value)) { | ||
const requireArray = value.map(module => { | ||
const requireFile = path.resolve(__dirname, module); | ||
return `require('${requireFile}').${key}.fn`; | ||
}); | ||
return `${variableName}['${key}'] = [ | ||
${requireArray.join(',\n')} | ||
]`; | ||
} | ||
}); | ||
const requireCode = Object.values(requires); | ||
const code = ` | ||
const ${variableName} = {}; | ||
${requireCode.join('\n')}; | ||
module.exports = ${variableName}; | ||
`; | ||
return code; | ||
}; | ||
const writeServerStrategy = (() => { | ||
var _ref = _asyncToGenerator(function* (filename) { | ||
const strategy = createStrategy(getDependencies(), {}); | ||
const code = createServerStrategyCode(strategy); | ||
return fs.writeFile(filename, code); | ||
}); | ||
return function writeServerStrategy(_x) { | ||
return _ref.apply(this, arguments); | ||
}; | ||
})(); | ||
const runWebpack = (() => { | ||
var _ref2 = _asyncToGenerator(function* (config) { | ||
return new Promise(function (resolve, reject) { | ||
webpack(config, function (err, stats) { | ||
if (err) return reject(err); | ||
const errors = stats.toJson('errors-only').errors.toString(); | ||
if (errors) return reject(errors); | ||
resolve(); | ||
}); | ||
}); | ||
}); | ||
return function runWebpack(_x2) { | ||
return _ref2.apply(this, arguments); | ||
}; | ||
})(); | ||
const build = (() => { | ||
var _ref3 = _asyncToGenerator(function* (callback) { | ||
yield writeServerStrategy(path.resolve(PROJECT_DIR, 'dist', 'server-strategy.js')); | ||
console.log('Wrote Server Strategy'); | ||
yield runWebpack(client_config); | ||
console.log('Created client package'); | ||
yield runWebpack(server_config); | ||
console.log('Created server package'); | ||
callback(); | ||
}); | ||
var _ref = _asyncToGenerator(function* (callback) { | ||
const strategy = createStrategy(getDependencies()); | ||
yield generateClient(path.resolve(PROJECT_DIR, 'dist', 'client.js'), strategy); | ||
const serverStrategy = generateServerStrategy(path.resolve(PROJECT_DIR, 'dist', 'server-strategy.js'), strategy); | ||
console.log('Creating a client package. This can take a minute or two..'); | ||
yield runWebpack(client_config); | ||
console.log('Created client package'); | ||
console.log('Now working on server package'); | ||
yield serverStrategy; | ||
yield runWebpack(server_config); | ||
console.log('Created server package'); | ||
callback(); | ||
}); | ||
return function build(_x3) { | ||
return _ref3.apply(this, arguments); | ||
}; | ||
return function build(_x) { | ||
return _ref.apply(this, arguments); | ||
}; | ||
})(); | ||
module.exports = build; | ||
module.exports = build; | ||
//# sourceMappingURL=index.js.map |
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
value: true | ||
}); | ||
@@ -35,64 +35,67 @@ exports.isReusable = exports.renderGet = undefined; | ||
const init = req => { | ||
req.eventcollector = req.eventcollector || new _eventCollector2.default({}); | ||
req.eventcollector.addMeta({ rendererVersion: VERSION, renderProfile: PROFILE }); | ||
req.eventcollector.startJob('rendering'); | ||
if (global.window && window.localStorage) window.localStorage.clear(); | ||
if (global.window && window.sessionStorage) window.sessionStorage.clear(); | ||
req.history = (0, _history.createMemoryHistory)(req.url); | ||
return req.eventcollector; | ||
req.eventcollector = req.eventcollector || new _eventCollector2.default({}); | ||
req.eventcollector.addMeta({ | ||
rendererVersion: VERSION, | ||
renderProfile: PROFILE | ||
}); | ||
req.eventcollector.startJob('rendering'); | ||
if (global.window && window.localStorage) window.localStorage.clear(); | ||
if (global.window && window.sessionStorage) window.sessionStorage.clear(); | ||
req.history = (0, _history.createMemoryHistory)(req.url); | ||
return req.eventcollector; | ||
}; | ||
const createConfig = (req, lincConfig) => { | ||
return typeof lincConfig === 'function' ? createConfig('SERVER', req) : lincConfig; | ||
return typeof lincConfig === 'function' ? createConfig('SERVER', req) : lincConfig; | ||
}; | ||
const redirect = (res, redirectLocation) => { | ||
res.statusCode = 302; | ||
res.setHeader('Location', redirectLocation.pathname + redirectLocation.search); | ||
res.end(); | ||
res.statusCode = 302; | ||
res.setHeader('Location', redirectLocation.pathname + redirectLocation.search); | ||
res.end(); | ||
}; | ||
const notfound = res => { | ||
res.statusCode = 404; | ||
res.end(); | ||
res.statusCode = 404; | ||
res.end(); | ||
}; | ||
const sendInitialHeaders = (res, config, assets) => { | ||
const polyfills_io = "https://cdn.polyfill.io/v2/polyfill.min.js?features="; | ||
const polyfillsURL = config.polyfills ? `${polyfills_io}${config.polyfills.replace(' ', '')}` : null; | ||
res.setHeader('Content-Type', 'text/html'); | ||
if (assets['bootstrap.js']) { | ||
res.append('Link', `</${assets['bootstrap.js']}>;rel=preload;as=script`); | ||
} | ||
if (assets['vendor.js']) { | ||
res.append('Link', `</${assets['vendor.js']}>;rel=preload;as=script`); | ||
} | ||
if (assets['main.js']) { | ||
res.append('Link', `</${assets['main.js']}>;rel=preload;as=script`); | ||
} | ||
if (polyfillsURL) { | ||
res.append('Link', '<https://cdn.polyfill.io>;rel=dns-prefetch'); | ||
res.append('Link', `<${polyfillsURL}>;rel=preload;as=script`); | ||
} | ||
const polyfills_io = 'https://cdn.polyfill.io/v2/polyfill.min.js?features='; | ||
const polyfillsURL = config.polyfills ? `${polyfills_io}${config.polyfills.replace(' ', '')}` : null; | ||
res.setHeader('Content-Type', 'text/html'); | ||
if (assets['bootstrap.js']) { | ||
res.append('Link', `</${assets['bootstrap.js']}>;rel=preload;as=script`); | ||
} | ||
if (assets['vendor.js']) { | ||
res.append('Link', `</${assets['vendor.js']}>;rel=preload;as=script`); | ||
} | ||
if (assets['main.js']) { | ||
res.append('Link', `</${assets['main.js']}>;rel=preload;as=script`); | ||
} | ||
if (polyfillsURL) { | ||
res.append('Link', '<https://cdn.polyfill.io>;rel=dns-prefetch'); | ||
res.append('Link', `<${polyfillsURL}>;rel=preload;as=script`); | ||
} | ||
}; | ||
const sendHeadAssets = (res, assets) => { | ||
res.write('<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">'); | ||
if (assets['bootstrap.css']) { | ||
res.write(`<link rel="stylesheet" href="/${assets['bootstrap.css']}">`); | ||
} | ||
if (assets['vendor.css']) { | ||
res.write(`<link rel="stylesheet" href="/${assets['vendor.css']}">`); | ||
} | ||
if (assets['main.css']) { | ||
res.write(`<link rel="stylesheet" href="/${assets['main.css']}">`); | ||
} | ||
res.write('<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">'); | ||
if (assets['bootstrap.css']) { | ||
res.write(`<link rel="stylesheet" href="/${assets['bootstrap.css']}">`); | ||
} | ||
if (assets['vendor.css']) { | ||
res.write(`<link rel="stylesheet" href="/${assets['vendor.css']}">`); | ||
} | ||
if (assets['main.css']) { | ||
res.write(`<link rel="stylesheet" href="/${assets['main.css']}">`); | ||
} | ||
}; | ||
const sendSettings = (res, settings) => { | ||
res.write(`<script>`); | ||
Object.keys(settings).forEach(key => { | ||
res.write(`window.${key} = ${JSON.stringify(settings[key])};\n`); | ||
}); | ||
res.write(`</script>`); | ||
res.write(`<script>`); | ||
Object.keys(settings).forEach(key => { | ||
res.write(`window.${key} = ${JSON.stringify(settings[key])};\n`); | ||
}); | ||
res.write(`</script>`); | ||
}; | ||
@@ -102,105 +105,103 @@ | ||
const dynamicHeadToString = head => { | ||
if (head) { | ||
const strArray = headTags.map(tag => head[tag] && head[tag].toString()); | ||
return strArray.reduce((previous, current) => current ? previous + current : previous, ''); | ||
} else { | ||
return ''; | ||
} | ||
if (head) { | ||
const strArray = headTags.map(tag => head[tag] && head[tag].toString()); | ||
return strArray.reduce((previous, current) => current ? previous + current : previous, ''); | ||
} else { | ||
return ''; | ||
} | ||
}; | ||
const sendDynamicHead = (res, head) => { | ||
res.write(dynamicHeadToString(head)); | ||
res.write(dynamicHeadToString(head)); | ||
}; | ||
const afterRender = (config, assets) => { | ||
const results = _serverStrategy2.default.afterRender.map(fn => fn(config, assets)); | ||
const ret = results.reduce((previous, current) => { | ||
return { | ||
head: previous.head + dynamicHeadToString(current.head), | ||
footer: previous.footer + (current.footer || '') | ||
}; | ||
}, { head: '', footer: '' }); | ||
return ret; | ||
const results = _serverStrategy2.default.afterRender.map(fn => fn(config, assets)); | ||
const ret = results.reduce((previous, current) => { | ||
return { | ||
head: previous.head + dynamicHeadToString(current.head), | ||
footer: previous.footer + (current.footer || '') | ||
}; | ||
}, { head: '', footer: '' }); | ||
return ret; | ||
}; | ||
const renderGet = (() => { | ||
var _ref = _asyncToGenerator(function* (req, res, settings) { | ||
try { | ||
const eventcollector = init(req); | ||
const config = createConfig(req, _lincConfigJs2.default); | ||
var _ref = _asyncToGenerator(function* (req, res, settings) { | ||
try { | ||
const eventcollector = init(req); | ||
const config = createConfig(req, _lincConfigJs2.default); | ||
const routeResult = yield _serverStrategy2.default.router(req, config); | ||
const redirectLocation = routeResult.redirectLocation, | ||
route = routeResult.route, | ||
routeComponent = routeResult.routeComponent; | ||
var _ref2 = yield _serverStrategy2.default.match(req, config); | ||
if (redirectLocation) { | ||
return redirect(res, redirectLocation); | ||
} else if (!routeComponent) { | ||
return notfound(res); | ||
} | ||
const getStatePromise = _serverStrategy2.default.getStatePromise(req, config, route, routeComponent); | ||
res.statusCode = 200; | ||
sendInitialHeaders(res, config, _assetManifest2.default); | ||
//sendHeaders(matchUrl(res, serverConfig.headers)); | ||
res.write('<!DOCTYPE html><html><head>'); | ||
//sendStaticHead(res, serverConfig.staticHead); | ||
sendHeadAssets(res, _assetManifest2.default); | ||
sendSettings(res, settings); | ||
if (res.flush) { | ||
res.flush(); | ||
} | ||
const state = yield getStatePromise; | ||
if (state && state.json) { | ||
res.write(`<script>window.__INITIALSTATE__ = ${JSON.stringify(state.json)};</script>`); | ||
//if(serverConfig.renderHead) { | ||
// sendDynamicHead(res, serverConfig.renderHead(req, state.json)); | ||
//} | ||
} | ||
if (_serverStrategy2.default.render.canStream && _serverStrategy2.default.render.canStream()) { | ||
res.write('</head><body><div id="root">'); | ||
//stream the things | ||
res.write('</div>'); | ||
const redirectLocation = _ref2.redirectLocation, | ||
route = _ref2.route, | ||
routeComponent = _ref2.routeComponent; | ||
var _afterRender = afterRender(config, _assetManifest2.default); | ||
if (redirectLocation) { | ||
return redirect(res, redirectLocation); | ||
} else if (!routeComponent) { | ||
return notfound(res); | ||
} | ||
const getStatePromise = _serverStrategy2.default.getStatePromiseFromRoute(req, config, route, routeComponent); | ||
res.statusCode = 200; | ||
sendInitialHeaders(res, config, _assetManifest2.default); | ||
//sendHeaders(matchUrl(res, serverConfig.headers)); | ||
res.write('<!DOCTYPE html><html><head>'); | ||
//sendStaticHead(res, serverConfig.staticHead); | ||
sendHeadAssets(res, _assetManifest2.default); | ||
sendSettings(res, settings); | ||
if (res.flush) { | ||
res.flush(); | ||
} | ||
const state = yield getStatePromise; | ||
if (state.json) { | ||
res.write(`<script>window.__INITIALSTATE__ = ${JSON.stringify(state.json)};</script>`); | ||
//if(serverConfig.renderHead) { | ||
// sendDynamicHead(res, serverConfig.renderHead(req, state.json)); | ||
//} | ||
} | ||
if (_serverStrategy2.default.renderToStream) { | ||
res.write('</head><body><div id="root">'); | ||
//stream the things | ||
res.write('</div>'); | ||
const footer = _afterRender.footer; | ||
var _afterRender = afterRender(config, _assetManifest2.default); | ||
res.write(`</head><body><div id="root">${html}</div>`); | ||
if (footer) { | ||
res.write(footer); | ||
} | ||
} else { | ||
let html; | ||
if (state && state.html) { | ||
html = state.html; | ||
} else { | ||
const renderComponent = _serverStrategy2.default.wrapInStoreHoC ? _serverStrategy2.default.wrapInStoreHoC(state.json, routeComponent) : routeComponent; | ||
html = yield _serverStrategy2.default.render(renderComponent); | ||
} | ||
const footer = _afterRender.footer; | ||
var _afterRender2 = afterRender(config, _assetManifest2.default); | ||
res.write(`</head><body><div id="root">${html}</div>`); | ||
if (footer) { | ||
res.write(footer); | ||
} | ||
} else { | ||
let html; | ||
if (state.html) { | ||
html = state.html; | ||
} else { | ||
const renderComponent = _serverStrategy2.default.wrapInStoreHoC ? _serverStrategy2.default.wrapInStoreHoC(state.json, routeComponent) : routeComponent; | ||
html = yield _serverStrategy2.default.renderToString(renderComponent); | ||
} | ||
const head = _afterRender2.head, | ||
footer = _afterRender2.footer; | ||
var _afterRender2 = afterRender(config, _assetManifest2.default); | ||
const head = _afterRender2.head, | ||
footer = _afterRender2.footer; | ||
if (head) { | ||
res.write(head); | ||
} | ||
res.write(`</head><body><div id="root">${html}</div>`); | ||
if (footer) { | ||
res.write(footer); | ||
} | ||
} | ||
res.write('</body></html>'); | ||
res.end(); | ||
} catch (e) { | ||
console.log('Uhoh!', e); | ||
if (head) { | ||
res.write(head); | ||
} | ||
}); | ||
res.write(`</head><body><div id="root">${html}</div>`); | ||
if (footer) { | ||
res.write(footer); | ||
} | ||
} | ||
res.write('</body></html>'); | ||
res.end(); | ||
} catch (e) { | ||
console.log('Uhoh!', e); | ||
} | ||
}); | ||
return function renderGet(_x, _x2, _x3) { | ||
return _ref.apply(this, arguments); | ||
}; | ||
return function renderGet(_x, _x2, _x3) { | ||
return _ref.apply(this, arguments); | ||
}; | ||
})(); | ||
@@ -211,2 +212,3 @@ | ||
exports.renderGet = renderGet; | ||
exports.isReusable = isReusable; | ||
exports.isReusable = isReusable; | ||
//# sourceMappingURL=render.js.map |
{ | ||
"name": "linc-profile-generic-react", | ||
"version": "0.9.7", | ||
"version": "0.10.0-0", | ||
"main": "dist/index.js", | ||
"scripts": { | ||
"lint": "eslint src test --fix", | ||
"clean": "rimraf dist", | ||
"build": "npm run clean; babel src -d dist", | ||
"build": "npm run clean; npm run lint; babel src -d dist -s", | ||
"dev": "npm run clean; babel src -d dist -s -w", | ||
"prepublish": "npm run build" | ||
@@ -46,4 +48,9 @@ }, | ||
"babel-cli": "^6.26.0", | ||
"eslint": "^4.7.2", | ||
"eslint-config-prettier": "^2.6.0", | ||
"eslint-plugin-prettier": "^2.3.1", | ||
"eslint-plugin-react": "^7.4.0", | ||
"prettier": "^1.7.2", | ||
"rimraf": "^2.6.2" | ||
} | ||
} |
@@ -89,3 +89,3 @@ const path = require('path'); | ||
entry: { | ||
'main': [path.resolve(LINC_DIR, 'dist', 'client.js')] | ||
'main': [path.resolve(PROJECT_DIR, 'dist', 'client.js')] | ||
}, | ||
@@ -92,0 +92,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
270811
52
1251
7