From 839c548e2e639998951b799eb13a9031a93a9a9b Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Tue, 31 Jul 2018 15:19:09 +0200 Subject: [PATCH 01/20] Works for one element --- jsLinks.js | 91 ++++++++++++++++++++++++++++++ prism.js | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++++ source.md | 41 ++++++++++++++ 3 files changed, 291 insertions(+) create mode 100644 jsLinks.js create mode 100644 prism.js create mode 100644 source.md diff --git a/jsLinks.js b/jsLinks.js new file mode 100644 index 000000000000..168b92f85ad1 --- /dev/null +++ b/jsLinks.js @@ -0,0 +1,91 @@ +module.exports = jslinks; + +jslinks.displayName = "jslinks"; +jslinks.aliases = []; + +function jslinks(Prism) { + Prism.languages["jslinks"] = Prism.languages.extend("javascript", { + keyword: /(
|<\/details>||<\/summary>)/ + }); +} + + + // for (let index = 0; index < code.length; index++) { + // const element = code[index]; + // let detailStart; + // let detailEnd; + // let summaryStart; + // let summaryEnd; + + // if (element.type === 'element') { + // detailStart = getDetails(element) + // summaryStart = getSummary(element) + // detailEnd = getDetails(element, true) + // summaryEnd = getSummary(element, true) + + // // if(summaryStart && summaryEnd) { + // console.log(summaryStart, summaryEnd) + // // console.log({ detailStart, detailEnd, summaryStart, summaryEnd }) + // const between = findAllBetween(node, summaryStart, summaryEnd) + // console.log({ between }) + // // } + // } +// } + +// let commentSummary = code.findIndex(ele => { +// if (ele.children) { +// return ele.children[0].value.endsWith(''); +// } +// }); + +// console.log(commentSummary); + +// for (let index = 0; index < code.length; index++) { +// const element = code[index]; + +// if (element.type === 'element') { +// if (isDetails(element)) { +// if(isSummary(code[index + 1])) { +// console.log(element) + +// element.tagName = 'details' +// element.children = [ +// { +// type: 'element', +// tagName: 'summary', +// children: getChildren(code, index) +// } +// ] +// } +// } +// if (isElement(element, 'details')) { +// if (isElement(code[index + 1], 'summary')) { +// console.log(inspect(element)) +// console.log(element) +// element.children = [ +// { +// type: 'element', +// tagName: 'details', +// properties: { +// className: 'myclassname' +// }, +// // children: [ +// // { +// // type: 'text', +// // value: refractor.highlight(code[index + 2], 'js') +// // } +// // ] +// } +// ]; +// } +// } +// } +// } + +// const text = code.filter(c => c.type === 'text').map(c => c.value) + +// const textCode = text.map(t => refractor.highlight(t, 'js')) + +// data.hChildren = code; + +// console.log(code); diff --git a/prism.js b/prism.js new file mode 100644 index 000000000000..3363153a8b72 --- /dev/null +++ b/prism.js @@ -0,0 +1,159 @@ +const util = require('util'); + +const refractor = require('refractor/core.js'); +const languages = require('prism-languages'); + +var remark = require('remark'); +var parse = require('remark-parse'); +var htmlRemark = require('remark-html'); + +const visit = require('unist-util-visit'); +var inspect = require('unist-util-inspect'); +var findAllBetween = require('unist-util-find-all-between'); + +refractor.register(require('./jsLinks.js')); + +var fs = require('fs'); + +var file = fs.readFileSync(__dirname + '/' + 'source.md', { encoding: 'utf8' }); + +remark() + .use(parse) + .use(attacher) + .use(htmlRemark) + .process(file, function(err, file) { + if (err) throw err; + if (file) { + fs.writeFileSync( + './index.html', + ` + ` + file.contents + ); + } + }); + +function isElement(tree, tag, closeTag = false) { + const openTag = closeTag ? ''; + + return open && tagMatch && close; +} + +function getDetails(tree, close = false) { + const tag = close ? '
' : '
' + if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { + return tree; + } +} + +function getSummary(tree, close = false) { + const tag = close ? '' : '' + if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { + return tree; + } +} + +function getChildren(tree, index) { + return tree; +} + +// var tree = remark().parse('Some _emphasis_, **importance**, and `code`.'); + +// console.log('tree', tree) + +// var parent = tree.children[0] +// var start = parent.children[0] +// var end = parent.children[parent.children.length - 1] + +// console.log('parent', inspect(parent)) +// console.log('start', inspect(start)) +// console.log('end', inspect(end)) + +// console.log('between',inspect(findAllBetween(parent, start, end))) + +function attacher({ include, exclude } = {}) { + return function transformer(tree, file) { + visit(tree, 'code', visitor); + + function visitor(node) { + const { lang } = node; + + if (!lang || (include && !~include.indexOf(lang)) || (exclude && ~exclude.indexOf(lang))) { + return; + } + + let { data } = node; + + if (!data) { + node.data = data = {}; + } + + try { + code = refractor.highlight(node.value, lang); + + const newTree = { + type: 'root', + children: code + } + + let detailsStart = code.filter(el => el.type === 'element').find(tr => { + return tr.properties.className.includes('keyword') && tr.children[0].value === '
' + }) + + let detailsEnd = code.filter(el => el.type === 'element').find(tr => { + return tr.properties.className.includes('keyword') && tr.children[0].value === '
' + }) + + let summaryStart = code.filter(el => el.type === 'element').find(tr => { + return tr.properties.className.includes('keyword') && tr.children[0].value === '' + }) + + let summaryEnd = code.filter(el => el.type === 'element').find(tr => { + return tr.properties.className.includes('keyword') && tr.children[0].value === '' + }) + + const summaryTree = findAllBetween(newTree, summaryStart, summaryEnd) + const detailsTree = findAllBetween(newTree, detailsStart, detailsEnd) + + const dSIndex = newTree.children.indexOf(detailsStart) + const dEIndex = newTree.children.indexOf(detailsEnd) + + const sSIndex = newTree.children.indexOf(summaryStart) + const sEIndex = newTree.children.indexOf(summaryEnd) + + newTree.children.splice(dSIndex, detailsTree.length + 1) + + const cleanDetailsTree = detailsTree.splice(summaryTree.length + 3) + + const newDetailsTree = { + type: 'element', + tagName: 'details', + children: [ + { + type: 'element', + tagName: 'summary', + children: summaryTree.splice(1) + }, + ...cleanDetailsTree + ] + } + + newTree.children.splice(dSIndex, 0, newDetailsTree) + + data.hChildren = newTree.children + + } catch (e) { + console.log(e) + throw e + } + + data.hProperties = data.hProperties || {}; + data.hProperties.className = ['hljs', ...(data.hProperties.className || []), `language-${lang}`]; + } + }; +} + +module.exports = attacher; diff --git a/source.md b/source.md new file mode 100644 index 000000000000..688f8f9d8cc3 --- /dev/null +++ b/source.md @@ -0,0 +1,41 @@ +```jslinks +const path = require('path'); + +module.exports = { +
+ + [mode](/concepts/mode): "production", // "production" | "development" | "none" + + [mode](/concepts/mode): "production", // enable many optimizations for production builds + [mode](/concepts/mode): "development", // enabled useful tools for development + [mode](/concepts/mode): "none", // no defaults +
+ // Chosen mode tells webpack to use its built-in optimizations accordingly. +
+ + [entry](/configuration/entry-context#entry): "./app/entry", // string | object | array + + [entry](/configuration/entry-context#entry): ["./app/entry1", "./app/entry2"], + [entry](/configuration/entry-context#entry): { + a: "./app/entry-a", + b: ["./app/entry-b1", "./app/entry-b2"] + }, +
+ // defaults to ./src + // Here the application starts executing + // and webpack starts bundling + [output](/configuration/output): { + // options related to how webpack emits results + [path](/configuration/output#output-path): path.resolve(__dirname, "dist"), // string + // the target directory for all output files + // must be an absolute path (use the Node.js path module) +
+ + [filename](/configuration/output#output-filename): "bundle.js", // string + + [filename](/configuration/output#output-filename): "[name].js", // for multiple entry points + [filename](/configuration/output#output-filename): "[chunkhash].js", // for [long term caching](/guides/caching) +
+ } +} +``` From 1a59d6724faaaf39063dd4328bc13fa24337974c Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Tue, 31 Jul 2018 18:56:24 +0200 Subject: [PATCH 02/20] uh --- prism.js | 155 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 118 insertions(+), 37 deletions(-) diff --git a/prism.js b/prism.js index 3363153a8b72..c8e4371a0491 100644 --- a/prism.js +++ b/prism.js @@ -43,14 +43,14 @@ function isElement(tree, tag, closeTag = false) { } function getDetails(tree, close = false) { - const tag = close ? '
' : '
' + const tag = close ? '
' : '
'; if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { return tree; } } function getSummary(tree, close = false) { - const tag = close ? '' : '' + const tag = close ? '' : ''; if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { return tree; } @@ -74,6 +74,14 @@ function getChildren(tree, index) { // console.log('between',inspect(findAllBetween(parent, start, end))) +function isElement(tree) { + return tree.type === 'element'; +} + +function isKeyword(tree) { + return tree.properties.className.includes('keyword'); +} + function attacher({ include, exclude } = {}) { return function transformer(tree, file) { visit(tree, 'code', visitor); @@ -97,57 +105,130 @@ function attacher({ include, exclude } = {}) { const newTree = { type: 'root', children: code - } - - let detailsStart = code.filter(el => el.type === 'element').find(tr => { - return tr.properties.className.includes('keyword') && tr.children[0].value === '
' + }; + + let detailsStart = code + .filter(isElement) + .filter(isKeyword) + .filter(tr => { + return tr.children[0].value === '
'; + }); + + let detailsEnd = code + .filter(isElement) + .filter(isKeyword) + .filter(tr => { + return tr.children[0].value === '
'; + }); + + let summaryStart = code + .filter(isElement) + .filter(isKeyword) + .filter(tr => { + return tr.children[0].value === ''; + }); + + let summaryEnd = code + .filter(isElement) + .filter(isKeyword) + .filter(tr => { + return tr.children[0].value === ''; + }); + + const summaryTrees = detailsStart.map((_, i) => { + return findAllBetween(newTree, summaryStart[i], summaryEnd[i]); + }); + + const detailsTree = detailsStart.map((_, i) => { + return findAllBetween(newTree, detailsStart[i], detailsEnd[i]); + }); + + const detailsStartIndexes = detailsStart.map((_, i) => { + return newTree.children.indexOf(detailsStart[i]); + }); + + // newTree.children.splice(detailsStartIndexes[0], detailsTree[0].length + 1); + // newTree.children.splice(detailsStartIndexes[1] - (detailsTree[0].length + 1), detailsTree[1].length + 1); + // newTree.children.splice(detailsStartIndexes[2] - (detailsTree[0].length + 1 + detailsTree[1].length + 1), detailsTree[2].length + 1); + + let prevCount = 0; + + detailsStart.forEach((_, i) => { + prevCount += !detailsTree[i - 1] ? 0 : detailsTree[i - 1].length + 1; + newTree.children.splice(detailsStartIndexes[i] - prevCount, detailsTree[i].length + 1) + }); + + const cleanDetailsTrees = detailsStart.map((_, i) => { + return detailsTree[i].splice(summaryTrees[i].length + 3) }) - let detailsEnd = code.filter(el => el.type === 'element').find(tr => { - return tr.properties.className.includes('keyword') && tr.children[0].value === '
' + const newDetailsTrees = detailsStart.map((_, i) => { + return { + type: 'element', + tagName: 'details', + properties: { + open: false + }, + children: [ + { + type: 'element', + tagName: 'summary', + children: summaryTrees[i].splice(1) + }, + ...cleanDetailsTrees[i] + ] + } }) - let summaryStart = code.filter(el => el.type === 'element').find(tr => { - return tr.properties.className.includes('keyword') && tr.children[0].value === '' - }) + let nextCount = 0; + + console.log(detailsStartIndexes) - let summaryEnd = code.filter(el => el.type === 'element').find(tr => { - return tr.properties.className.includes('keyword') && tr.children[0].value === '' + newDetailsTrees.forEach(e => { + console.log(e.children.length + 3) }) - const summaryTree = findAllBetween(newTree, summaryStart, summaryEnd) - const detailsTree = findAllBetween(newTree, detailsStart, detailsEnd) + // detailsStart.forEach((_, i) => { + newTree.children.splice(detailsStartIndexes[0], 0, newDetailsTrees[0]) + const prev = detailsStartIndexes[1] - (detailsStartIndexes[0] + newDetailsTrees[0].children.length + 4) + newTree.children.splice(detailsStartIndexes[1] - (detailsStartIndexes[0] + newDetailsTrees[0].children.length + 4), 0, newDetailsTrees[1]) + newTree.children.splice(detailsStartIndexes[2] - (prev + detailsStartIndexes[0]), 0, newDetailsTrees[2]) + // }) - const dSIndex = newTree.children.indexOf(detailsStart) - const dEIndex = newTree.children.indexOf(detailsEnd) + // console.log(util.inspect(newTree.children.map((e, i) => [i, e]), { depth: 4 })); - const sSIndex = newTree.children.indexOf(summaryStart) - const sEIndex = newTree.children.indexOf(summaryEnd) + // const summaryTree = findAllBetween(newTree, summaryStart, summaryEnd) + // const detailsTree = findAllBetween(newTree, detailsStart, detailsEnd) - newTree.children.splice(dSIndex, detailsTree.length + 1) + // const dSIndex = newTree.children.indexOf(detailsStart) + // const dEIndex = newTree.children.indexOf(detailsEnd) - const cleanDetailsTree = detailsTree.splice(summaryTree.length + 3) + // const sSIndex = newTree.children.indexOf(summaryStart) + // const sEIndex = newTree.children.indexOf(summaryEnd) - const newDetailsTree = { - type: 'element', - tagName: 'details', - children: [ - { - type: 'element', - tagName: 'summary', - children: summaryTree.splice(1) - }, - ...cleanDetailsTree - ] - } + // newTree.children.splice(dSIndex, detailsTree.length + 1) + + // const cleanDetailsTree = detailsTree.splice(summaryTree.length + 3) - newTree.children.splice(dSIndex, 0, newDetailsTree) + // const newDetailsTree = { + // type: 'element', + // tagName: 'details', + // children: [ + // { + // type: 'element', + // tagName: 'summary', + // children: summaryTree.splice(1) + // }, + // ...cleanDetailsTree + // ] + // } - data.hChildren = newTree.children + // newTree.children.splice(dSIndex, 0, newDetailsTree) + data.hChildren = newTree.children; } catch (e) { - console.log(e) - throw e + console.log(e); + throw e; } data.hProperties = data.hProperties || {}; From 50c08bf65be4fb4b9f430c9702b9d29dd96ccbfc Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Fri, 3 Aug 2018 15:41:16 +0200 Subject: [PATCH 03/20] Almost --- jsLinks.js | 2 +- package.json | 5 ---- prism.js | 64 ++++------------------------------------------------ source.md | 60 ++++++++++++++++++++++++++++++++++-------------- 4 files changed, 48 insertions(+), 83 deletions(-) diff --git a/jsLinks.js b/jsLinks.js index 168b92f85ad1..6d44a5685f9e 100644 --- a/jsLinks.js +++ b/jsLinks.js @@ -4,7 +4,7 @@ jslinks.displayName = "jslinks"; jslinks.aliases = []; function jslinks(Prism) { - Prism.languages["jslinks"] = Prism.languages.extend("javascript", { + Prism.languages["js-with-links-with-details"] = Prism.languages.extend("javascript", { keyword: /(
|<\/details>||<\/summary>)/ }); } diff --git a/package.json b/package.json index 1ec464df26ee..6623a770ed76 100644 --- a/package.json +++ b/package.json @@ -41,11 +41,6 @@ "serve": "npm run build && sirv start ./dist --port 4000", "deploy": "gh-pages -d dist" }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, "lint-staged": { "*.{js,jsx,md}": ["npm run lint:js"], "*.md": ["npm run lint:markdown"] diff --git a/prism.js b/prism.js index c8e4371a0491..01b115a6034d 100644 --- a/prism.js +++ b/prism.js @@ -60,20 +60,6 @@ function getChildren(tree, index) { return tree; } -// var tree = remark().parse('Some _emphasis_, **importance**, and `code`.'); - -// console.log('tree', tree) - -// var parent = tree.children[0] -// var start = parent.children[0] -// var end = parent.children[parent.children.length - 1] - -// console.log('parent', inspect(parent)) -// console.log('start', inspect(start)) -// console.log('end', inspect(end)) - -// console.log('between',inspect(findAllBetween(parent, start, end))) - function isElement(tree) { return tree.type === 'element'; } @@ -147,10 +133,6 @@ function attacher({ include, exclude } = {}) { return newTree.children.indexOf(detailsStart[i]); }); - // newTree.children.splice(detailsStartIndexes[0], detailsTree[0].length + 1); - // newTree.children.splice(detailsStartIndexes[1] - (detailsTree[0].length + 1), detailsTree[1].length + 1); - // newTree.children.splice(detailsStartIndexes[2] - (detailsTree[0].length + 1 + detailsTree[1].length + 1), detailsTree[2].length + 1); - let prevCount = 0; detailsStart.forEach((_, i) => { @@ -180,51 +162,13 @@ function attacher({ include, exclude } = {}) { } }) - let nextCount = 0; - - console.log(detailsStartIndexes) + let treeCount = 0 - newDetailsTrees.forEach(e => { - console.log(e.children.length + 3) + detailsStart.forEach((_, i) => { + treeCount = detailsStartIndexes[i - 1] ? (detailsStartIndexes[i - 1] + newDetailsTrees[i - 1].children.length + 4) : 0 + newTree.children.splice(detailsStartIndexes[i] - treeCount, 0, newDetailsTrees[i]) }) - // detailsStart.forEach((_, i) => { - newTree.children.splice(detailsStartIndexes[0], 0, newDetailsTrees[0]) - const prev = detailsStartIndexes[1] - (detailsStartIndexes[0] + newDetailsTrees[0].children.length + 4) - newTree.children.splice(detailsStartIndexes[1] - (detailsStartIndexes[0] + newDetailsTrees[0].children.length + 4), 0, newDetailsTrees[1]) - newTree.children.splice(detailsStartIndexes[2] - (prev + detailsStartIndexes[0]), 0, newDetailsTrees[2]) - // }) - - // console.log(util.inspect(newTree.children.map((e, i) => [i, e]), { depth: 4 })); - - // const summaryTree = findAllBetween(newTree, summaryStart, summaryEnd) - // const detailsTree = findAllBetween(newTree, detailsStart, detailsEnd) - - // const dSIndex = newTree.children.indexOf(detailsStart) - // const dEIndex = newTree.children.indexOf(detailsEnd) - - // const sSIndex = newTree.children.indexOf(summaryStart) - // const sEIndex = newTree.children.indexOf(summaryEnd) - - // newTree.children.splice(dSIndex, detailsTree.length + 1) - - // const cleanDetailsTree = detailsTree.splice(summaryTree.length + 3) - - // const newDetailsTree = { - // type: 'element', - // tagName: 'details', - // children: [ - // { - // type: 'element', - // tagName: 'summary', - // children: summaryTree.splice(1) - // }, - // ...cleanDetailsTree - // ] - // } - - // newTree.children.splice(dSIndex, 0, newDetailsTree) - data.hChildren = newTree.children; } catch (e) { console.log(e); diff --git a/source.md b/source.md index 688f8f9d8cc3..202ab95d4137 100644 --- a/source.md +++ b/source.md @@ -1,4 +1,5 @@ -```jslinks +```js-with-links-with-details + const path = require('path'); module.exports = { @@ -21,21 +22,46 @@ module.exports = { b: ["./app/entry-b1", "./app/entry-b2"] },
- // defaults to ./src - // Here the application starts executing - // and webpack starts bundling - [output](/configuration/output): { - // options related to how webpack emits results - [path](/configuration/output#output-path): path.resolve(__dirname, "dist"), // string - // the target directory for all output files - // must be an absolute path (use the Node.js path module) -
- - [filename](/configuration/output#output-filename): "bundle.js", // string - - [filename](/configuration/output#output-filename): "[name].js", // for multiple entry points - [filename](/configuration/output#output-filename): "[chunkhash].js", // for [long term caching](/guides/caching) -
- } +
+ + /* Advanced configuration (click to show) */ + + [resolveLoader](/configuration/resolve#resolveloader): { /* same as resolve */ } + // separate resolve options for loaders + [parallelism](other-options#parallelism): 1, // number + // limit the number of parallel processed modules + [profile](other-options#profile): true, // boolean + // capture timing information + [bail](other-options#bail): true, //boolean + // fail out on the first error instead of tolerating it. + [cache](other-options#cache): false, // boolean + // disable/enable caching + [watch](watch#watch): true, // boolean + // enables watching + [watchOptions](watch#watchoptions): { + [aggregateTimeout](watch#watchoptions-aggregatetimeout): 1000, // in ms + // aggregates multiple changes to a single rebuild + [poll](watch#watchoptions-poll): true, + [poll](watch#watchoptions-poll): 500, // intervall in ms + // enables polling mode for watching + // must be used on filesystems that doesn't notify on change + // i. e. nfs shares + }, + [node](node): { + // Polyfills and mocks to run Node.js- + // environment code in non-Node environments. + [console](node#node-console): false, // boolean | "mock" + [global](node#node-global): true, // boolean | "mock" + [process](node#node-process): true, // boolean + [__filename](node#node-__filename): "mock", // boolean | "mock" + [__dirname](node#node-__dirname): "mock", // boolean | "mock" + [Buffer](node#node-buffer): true, // boolean | "mock" + [setImmediate](node#node-setimmediate): true // boolean | "mock" | "empty" + }, + [recordsPath](other-options#recordspath): path.resolve(__dirname, "build/records.json"), + [recordsInputPath](other-options#recordsinputpath): path.resolve(__dirname, "build/records.json"), + [recordsOutputPath](other-options#recordsoutputpath): path.resolve(__dirname, "build/records.json"), + // TODO +
} ``` From 027fa0e55c7d27e0b5f855e40516100c5c5cb3e9 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Sat, 11 Aug 2018 01:04:07 +0200 Subject: [PATCH 04/20] Works, but not for nested details --- prism.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/prism.js b/prism.js index 01b115a6034d..c29d6f489822 100644 --- a/prism.js +++ b/prism.js @@ -133,11 +133,13 @@ function attacher({ include, exclude } = {}) { return newTree.children.indexOf(detailsStart[i]); }); + console.log(inspect(detailsTree[1])) + let prevCount = 0; detailsStart.forEach((_, i) => { prevCount += !detailsTree[i - 1] ? 0 : detailsTree[i - 1].length + 1; - newTree.children.splice(detailsStartIndexes[i] - prevCount, detailsTree[i].length + 1) + newTree.children.splice(detailsStartIndexes[i] - prevCount + i, detailsTree[i].length + 1, ...[{ type: 'text', value: `${detailsStartIndexes[i]}` }]) }); const cleanDetailsTrees = detailsStart.map((_, i) => { @@ -162,13 +164,19 @@ function attacher({ include, exclude } = {}) { } }) - let treeCount = 0 + // console.log(util.inspect(newTree.children.map((e, i) => ({ [i]: e})), { depth: 4, maxArrayLength: 300 })) detailsStart.forEach((_, i) => { - treeCount = detailsStartIndexes[i - 1] ? (detailsStartIndexes[i - 1] + newDetailsTrees[i - 1].children.length + 4) : 0 - newTree.children.splice(detailsStartIndexes[i] - treeCount, 0, newDetailsTrees[i]) + let insertPosition = newTree.children.findIndex(d => parseInt(d.value, 10) === detailsStartIndexes[i]) + + newTree.children.splice(insertPosition, 1) + newTree.children.splice(insertPosition, 0, newDetailsTrees[i]) }) + // console.log(util.inspect(newTree.children.map((e, i) => ({ [i]: e})), { depth: 4, maxArrayLength: 300 })) + + // console.log(newTree.children) + data.hChildren = newTree.children; } catch (e) { console.log(e); From ab99ba60e5fd50b494f89d5413e32e9c1f30d21f Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Mon, 13 Aug 2018 17:06:51 +0200 Subject: [PATCH 05/20] it works --- index.html | 24 ++++++++++++++ package.json | 13 ++++++-- prism.js | 2 +- source.md | 82 ++++++++++++--------------------------------- yarn.lock | 93 ++++++++++++++++++---------------------------------- 5 files changed, 87 insertions(+), 127 deletions(-) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 000000000000..afec01c3e2da --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + 
const path = require('path');
+
+module.exports = {
+  [output](/configuration/

+          /* Expertoutputconfiguration(onownrisk) */
+        
+        // prefixmodulesourcesinbundleforbetterreadablitity
+      </details>
+    

+  }

+        /* Advancedoutputconfiguration(clicktoshow) */
+      
+      // specifieshowcrossoriginrequestareissuedbytheruntime
+      <details>
+        <summary>
+          /* Expertoutputconfiguration(onownrisk) */
+        </summary>
+        // prefixmodulesourcesinbundleforbetterreadablitity
+      

+        // summaryuniversalmoduledefinition
+      
+      // universalmoduledefinition
+
diff --git a/package.json b/package.json index 6623a770ed76..c5a3775b8827 100644 --- a/package.json +++ b/package.json @@ -42,8 +42,12 @@ "deploy": "gh-pages -d dist" }, "lint-staged": { - "*.{js,jsx,md}": ["npm run lint:js"], - "*.md": ["npm run lint:markdown"] + "*.{js,jsx,md}": [ + "npm run lint:js" + ], + "*.md": [ + "npm run lint:markdown" + ] }, "devDependencies": { "@octokit/rest": "^15.2.6", @@ -111,15 +115,18 @@ "tap-parser": "^6.0.1", "through2": "^2.0.3", "uglifyjs-webpack-plugin": "^1.1.6", + "unist-util-find-all-between": "1.0.1", + "unist-util-inspect": "4.1.3", + "unist-util-remove": "1.0.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7", "webpack-merge": "^4.1.0" }, "dependencies": { "@rigor789/remark-autolink-headings": "^5.1.0", + "ajv": "^5.5.2", "docsearch.js": "^2.5.2", "gitter-sidecar": "^1.2.3", - "ajv": "^5.5.2", "javascriptstuff-db": "^1.12.0", "lodash.throttle": "^4.1.1", "prop-types": "^15.5.10", diff --git a/prism.js b/prism.js index c29d6f489822..51fe897e52c4 100644 --- a/prism.js +++ b/prism.js @@ -133,7 +133,7 @@ function attacher({ include, exclude } = {}) { return newTree.children.indexOf(detailsStart[i]); }); - console.log(inspect(detailsTree[1])) + console.log(inspect(detailsTree[2])) let prevCount = 0; diff --git a/source.md b/source.md index 202ab95d4137..6361707721c3 100644 --- a/source.md +++ b/source.md @@ -1,67 +1,27 @@ ```js-with-links-with-details - const path = require('path'); module.exports = { -
- - [mode](/concepts/mode): "production", // "production" | "development" | "none" - - [mode](/concepts/mode): "production", // enable many optimizations for production builds - [mode](/concepts/mode): "development", // enabled useful tools for development - [mode](/concepts/mode): "none", // no defaults -
- // Chosen mode tells webpack to use its built-in optimizations accordingly. -
- - [entry](/configuration/entry-context#entry): "./app/entry", // string | object | array - - [entry](/configuration/entry-context#entry): ["./app/entry1", "./app/entry2"], - [entry](/configuration/entry-context#entry): { - a: "./app/entry-a", - b: ["./app/entry-b1", "./app/entry-b2"] - }, -
-
- - /* Advanced configuration (click to show) */ - - [resolveLoader](/configuration/resolve#resolveloader): { /* same as resolve */ } - // separate resolve options for loaders - [parallelism](other-options#parallelism): 1, // number - // limit the number of parallel processed modules - [profile](other-options#profile): true, // boolean - // capture timing information - [bail](other-options#bail): true, //boolean - // fail out on the first error instead of tolerating it. - [cache](other-options#cache): false, // boolean - // disable/enable caching - [watch](watch#watch): true, // boolean - // enables watching - [watchOptions](watch#watchoptions): { - [aggregateTimeout](watch#watchoptions-aggregatetimeout): 1000, // in ms - // aggregates multiple changes to a single rebuild - [poll](watch#watchoptions-poll): true, - [poll](watch#watchoptions-poll): 500, // intervall in ms - // enables polling mode for watching - // must be used on filesystems that doesn't notify on change - // i. e. nfs shares - }, - [node](node): { - // Polyfills and mocks to run Node.js- - // environment code in non-Node environments. - [console](node#node-console): false, // boolean | "mock" - [global](node#node-global): true, // boolean | "mock" - [process](node#node-process): true, // boolean - [__filename](node#node-__filename): "mock", // boolean | "mock" - [__dirname](node#node-__dirname): "mock", // boolean | "mock" - [Buffer](node#node-buffer): true, // boolean | "mock" - [setImmediate](node#node-setimmediate): true // boolean | "mock" | "empty" - }, - [recordsPath](other-options#recordspath): path.resolve(__dirname, "build/records.json"), - [recordsInputPath](other-options#recordsinputpath): path.resolve(__dirname, "build/records.json"), - [recordsOutputPath](other-options#recordsoutputpath): path.resolve(__dirname, "build/records.json"), - // TODO -
+ [output](/configuration/output): { +
+ + // summaryuniversalmoduledefinition + + // universalmoduledefinition +
+ // thetypeoftheexportedlibrary +
+ + /* Advancedoutputconfiguration(clicktoshow) */ + + // specifieshowcrossoriginrequestareissuedbytheruntime +
+ + /* Expertoutputconfiguration(onownrisk) */ + + // prefixmodulesourcesinbundleforbetterreadablitity +
+
+ } } ``` diff --git a/yarn.lock b/yarn.lock index 7acb9d87b060..05271221df3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1664,14 +1664,10 @@ color-convert@^1.3.0, color-convert@^1.9.0: dependencies: color-name "1.1.1" -color-name@1.1.1: +color-name@1.1.1, color-name@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689" -color-name@^1.0.0: - version "1.1.3" - resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" - color-string@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991" @@ -1714,11 +1710,11 @@ comma-separated-tokens@^1.0.0, comma-separated-tokens@^1.0.1: dependencies: trim "0.0.1" -commander@2.15.1: +commander@2.15.1, commander@^2.13.0, commander@^2.14.1: version "2.15.1" resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f" -commander@2.16.x, commander@^2.13.0, commander@^2.14.1, commander@^2.5.0, commander@^2.9.0, commander@~2.16.0: +commander@2.16.x, commander@^2.5.0, commander@^2.9.0, commander@~2.16.0: version "2.16.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.16.0.tgz#f16390593996ceb4f3eeb020b31d78528f7f8a50" @@ -1953,7 +1949,7 @@ createerror@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/createerror/-/createerror-1.2.0.tgz#5881f9abdfc2826fd1c3cf09adffe6da2ec74909" -createerror@1.3.0, createerror@^1.1.0, createerror@^1.2.0: +createerror@^1.1.0, createerror@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/createerror/-/createerror-1.3.0.tgz#c666bd4cd6b94e35415396569d4649dd0cdb3313" @@ -2439,20 +2435,13 @@ domutils@1.1: dependencies: domelementtype "1" -domutils@1.5.1: +domutils@1.5.1, domutils@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" dependencies: dom-serializer "0" domelementtype "1" -domutils@^1.5.1: - version "1.7.0" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a" - dependencies: - dom-serializer "0" - domelementtype "1" - dot-prop@^4.1.0: version "4.2.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57" @@ -3045,14 +3034,10 @@ extract-zip@^1.6.6: mkdirp "0.5.1" yauzl "2.4.1" -extsprintf@1.3.0: +extsprintf@1.3.0, extsprintf@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05" -extsprintf@^1.2.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" - fast-deep-equal@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614" @@ -4091,18 +4076,12 @@ http-signature@~1.2.0: jsprim "^1.2.2" sshpk "^1.7.0" -httperrors@2.2.0: +httperrors@2.2.0, httperrors@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/httperrors/-/httperrors-2.2.0.tgz#cdc2e21b8866a63f9ed69e569d075ea62a0c934f" dependencies: createerror "1.2.0" -httperrors@^2.2.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/httperrors/-/httperrors-2.3.0.tgz#edb7bfc2f635b00ef27e92d46ca48b5840683679" - dependencies: - createerror "1.3.0" - https-browserify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" @@ -5554,7 +5533,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1: dependencies: brace-expansion "^1.1.7" -minimist@0.0.8: +minimist@0.0.8, minimist@~0.0.1: version "0.0.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" @@ -5562,10 +5541,6 @@ minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" -minimist@~0.0.1: - version "0.0.10" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" - minipass@^2.2.0, minipass@^2.2.1, minipass@^2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233" @@ -6828,10 +6803,6 @@ pseudomap@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" -psl@^1.1.24: - version "1.1.28" - resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.28.tgz#4fb6ceb08a1e2214d4fd4de0ca22dae13740bc7b" - public-encrypt@^4.0.0: version "4.0.2" resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.2.tgz#46eb9107206bf73489f8b85b69d91334c6610994" @@ -7166,7 +7137,7 @@ read-pkg@^4.0.1: string_decoder "~1.1.1" util-deprecate "~1.0.1" -readable-stream@1.0, readable-stream@~1.0.17: +readable-stream@1.0, readable-stream@^1.0.33, readable-stream@~1.0.17: version "1.0.34" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" dependencies: @@ -7175,15 +7146,6 @@ readable-stream@1.0, readable-stream@~1.0.17: isarray "0.0.1" string_decoder "~0.10.x" -readable-stream@^1.0.33: - version "1.1.14" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9" - dependencies: - core-util-is "~1.0.0" - inherits "~2.0.1" - isarray "0.0.1" - string_decoder "~0.10.x" - readable-stream@~2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e" @@ -8347,11 +8309,7 @@ static-site-generator-webpack-plugin@^3.4.1: url "^0.11.0" webpack-sources "^0.2.0" -"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2": - version "1.5.0" - resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" - -statuses@~1.4.0: +"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2", statuses@~1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087" @@ -8624,9 +8582,9 @@ tap-parser@^6.0.1: js-yaml "^3.2.7" minipass "^2.2.0" -"tap-render@github:munter/tap-render#0.1.7-patch1": +tap-render@Munter/tap-render#0.1.7-patch1: version "0.1.7" - resolved "https://codeload.github.com/munter/tap-render/tar.gz/35bf3ac21c4fd2776d8569d5e8a1ab62df1f6d4f" + resolved "https://codeload.github.com/Munter/tap-render/tar.gz/35bf3ac21c4fd2776d8569d5e8a1ab62df1f6d4f" dependencies: jsonify "0.0.0" pause-stream "0.0.7" @@ -8790,14 +8748,7 @@ toposort@^1.0.0: version "1.0.7" resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029" -tough-cookie@>=2.3.3, tough-cookie@^2.3.2: - version "2.4.3" - resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781" - dependencies: - psl "^1.1.24" - punycode "^1.4.1" - -tough-cookie@~2.3.0, tough-cookie@~2.3.3: +tough-cookie@>=2.3.3, tough-cookie@^2.3.2, tough-cookie@~2.3.0, tough-cookie@~2.3.3: version "2.3.4" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655" dependencies: @@ -9065,10 +9016,22 @@ unist-builder@^1.0.1: dependencies: object-assign "^4.1.0" +unist-util-find-all-between@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/unist-util-find-all-between/-/unist-util-find-all-between-1.0.1.tgz#f91500561422c1f0f67482e9e15eca142cd1ed5a" + dependencies: + unist-util-is "^2.0.0" + unist-util-generated@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.2.tgz#8b993f9239d8e560be6ee6e91c3f7b7208e5ce25" +unist-util-inspect@4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-4.1.3.tgz#39470e6d77485db285966df78431219aa1287822" + dependencies: + is-empty "^1.0.0" + unist-util-is@^2.0.0, unist-util-is@^2.1.1, unist-util-is@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db" @@ -9089,6 +9052,12 @@ unist-util-remove-position@^1.0.0: dependencies: unist-util-visit "^1.1.0" +unist-util-remove@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.1.tgz#3e967d2aeb3ee9e7f0ee8354172986fba7ff33a5" + dependencies: + unist-util-is "^2.0.0" + unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6" From a13773a51369994371d6671d481b6e7d35c2a2b2 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Thu, 23 Aug 2018 18:21:00 +0200 Subject: [PATCH 06/20] It works --- jsLinks.js | 10 +- package.json | 5 + prism.js | 268 ++++++++++-------- src/components/Site/Site.jsx | 49 ++++ src/content/configuration/index.md | 403 ---------------------------- src/content/configuration/index.mdx | 19 ++ src/content/configuration/modes.js | 10 + webpack.common.js | 74 ++--- yarn.lock | 79 +++++- 9 files changed, 358 insertions(+), 559 deletions(-) delete mode 100644 src/content/configuration/index.md create mode 100644 src/content/configuration/index.mdx create mode 100644 src/content/configuration/modes.js diff --git a/jsLinks.js b/jsLinks.js index 6d44a5685f9e..8dd2470f9202 100644 --- a/jsLinks.js +++ b/jsLinks.js @@ -5,7 +5,15 @@ jslinks.aliases = []; function jslinks(Prism) { Prism.languages["js-with-links-with-details"] = Prism.languages.extend("javascript", { - keyword: /(
|<\/details>||<\/summary>)/ + keyword: { + pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/, + greedy: true, + inside: { + // punctuation: /()/, + // string: /()/, + rest: Prism.languages.js + } + } }); } diff --git a/package.json b/package.json index c5a3775b8827..fcb95158a653 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,8 @@ ] }, "devDependencies": { + "@mdx-js/loader": "0.15.0", + "@mdx-js/mdx": "0.15.0", "@octokit/rest": "^15.2.6", "alex": "^5.1.0", "autoprefixer": "^7.2.3", @@ -94,6 +96,7 @@ "node-sass": "^4.5.3", "npm-run-all": "^4.1.1", "postcss-loader": "^2.0.6", + "react-dropdown": "1.6.2", "redirect-webpack-plugin": "^0.1.1", "remark": "^9.0.0", "remark-autolink-headings": "^5.0.0", @@ -115,9 +118,11 @@ "tap-parser": "^6.0.1", "through2": "^2.0.3", "uglifyjs-webpack-plugin": "^1.1.6", + "unist-util-find": "1.0.1", "unist-util-find-all-between": "1.0.1", "unist-util-inspect": "4.1.3", "unist-util-remove": "1.0.1", + "unist-util-select": "1.5.0", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7", "webpack-merge": "^4.1.0" diff --git a/prism.js b/prism.js index 51fe897e52c4..de43d10b9b15 100644 --- a/prism.js +++ b/prism.js @@ -9,13 +9,14 @@ var htmlRemark = require('remark-html'); const visit = require('unist-util-visit'); var inspect = require('unist-util-inspect'); +var find = require('unist-util-find'); var findAllBetween = require('unist-util-find-all-between'); refractor.register(require('./jsLinks.js')); var fs = require('fs'); -var file = fs.readFileSync(__dirname + '/' + 'source.md', { encoding: 'utf8' }); +var file = fs.readFileSync(__dirname + '/src/content/configuration/' + 'index.mdx', { encoding: 'utf8' }); remark() .use(parse) @@ -26,50 +27,54 @@ remark() if (file) { fs.writeFileSync( './index.html', - ` - ` + file.contents + ` +
` + + file.contents + + `
` ); } }); -function isElement(tree, tag, closeTag = false) { - const openTag = closeTag ? ''; +// let open = tree.children[0].children[0].children[0].value === openTag; +// let tagMatch = tree.children[0].children[1].value === tag; +// let close = tree.children[1].children[0].value === '>'; - return open && tagMatch && close; -} +// return open && tagMatch && close; +// } -function getDetails(tree, close = false) { - const tag = close ? '
' : '
'; - if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { - return tree; - } -} +// function getDetails(tree, close = false) { +// const tag = close ? '
' : '
'; +// if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { +// return tree; +// } +// } -function getSummary(tree, close = false) { - const tag = close ? '
' : ''; - if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { - return tree; - } -} +// function getSummary(tree, close = false) { +// const tag = close ? '' : ''; +// if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { +// return tree; +// } +// } -function getChildren(tree, index) { - return tree; -} +// function getChildren(tree, index) { +// return tree; +// } -function isElement(tree) { - return tree.type === 'element'; -} +// function isElement(tree) { +// return tree.type === 'element'; +// } -function isKeyword(tree) { - return tree.properties.className.includes('keyword'); -} +// function isKeyword(tree) { +// return tree.properties.className.includes('keyword'); +// } function attacher({ include, exclude } = {}) { - return function transformer(tree, file) { + return transformer; + + function transformer(tree, file) { visit(tree, 'code', visitor); function visitor(node) { @@ -86,107 +91,132 @@ function attacher({ include, exclude } = {}) { } try { - code = refractor.highlight(node.value, lang); - - const newTree = { - type: 'root', - children: code - }; - - let detailsStart = code - .filter(isElement) - .filter(isKeyword) - .filter(tr => { - return tr.children[0].value === '
'; - }); - - let detailsEnd = code - .filter(isElement) - .filter(isKeyword) - .filter(tr => { - return tr.children[0].value === '
'; - }); - - let summaryStart = code - .filter(isElement) - .filter(isKeyword) - .filter(tr => { - return tr.children[0].value === ''; - }); - - let summaryEnd = code - .filter(isElement) - .filter(isKeyword) - .filter(tr => { - return tr.children[0].value === ''; - }); - - const summaryTrees = detailsStart.map((_, i) => { - return findAllBetween(newTree, summaryStart[i], summaryEnd[i]); - }); - - const detailsTree = detailsStart.map((_, i) => { - return findAllBetween(newTree, detailsStart[i], detailsEnd[i]); - }); - - const detailsStartIndexes = detailsStart.map((_, i) => { - return newTree.children.indexOf(detailsStart[i]); - }); - - console.log(inspect(detailsTree[2])) - - let prevCount = 0; - - detailsStart.forEach((_, i) => { - prevCount += !detailsTree[i - 1] ? 0 : detailsTree[i - 1].length + 1; - newTree.children.splice(detailsStartIndexes[i] - prevCount + i, detailsTree[i].length + 1, ...[{ type: 'text', value: `${detailsStartIndexes[i]}` }]) - }); - - const cleanDetailsTrees = detailsStart.map((_, i) => { - return detailsTree[i].splice(summaryTrees[i].length + 3) - }) + data.hChildren = refractor.highlight(node.value, lang); - const newDetailsTrees = detailsStart.map((_, i) => { - return { - type: 'element', - tagName: 'details', - properties: { - open: false - }, - children: [ - { - type: 'element', - tagName: 'summary', - children: summaryTrees[i].splice(1) - }, - ...cleanDetailsTrees[i] - ] + data.hChildren.forEach(node => { + if(node.properties && node.properties.className.includes('keyword')) { + node.properties.componentname = node.children[1].value } }) - // console.log(util.inspect(newTree.children.map((e, i) => ({ [i]: e})), { depth: 4, maxArrayLength: 300 })) - detailsStart.forEach((_, i) => { - let insertPosition = newTree.children.findIndex(d => parseInt(d.value, 10) === detailsStartIndexes[i]) - - newTree.children.splice(insertPosition, 1) - newTree.children.splice(insertPosition, 0, newDetailsTrees[i]) - }) - // console.log(util.inspect(newTree.children.map((e, i) => ({ [i]: e})), { depth: 4, maxArrayLength: 300 })) - // console.log(newTree.children) - - data.hChildren = newTree.children; + // console.log(JSON.stringify(data.hChildren, null, 2)); } catch (e) { - console.log(e); throw e; } + // try { + // code = refractor.highlight(node.value, lang); + + // const newTree = { + // type: 'root', + // children: code + // }; + + // let detailsStart = code + // .filter(isElement) + // .filter(isKeyword) + // .filter(tr => { + // return tr.children[0].value === '
'; + // }); + + // let detailsEnd = code + // .filter(isElement) + // .filter(isKeyword) + // .filter(tr => { + // return tr.children[0].value === '
'; + // }); + + // let summaryStart = code + // .filter(isElement) + // .filter(isKeyword) + // .filter(tr => { + // return tr.children[0].value === ''; + // }); + + // let summaryEnd = code + // .filter(isElement) + // .filter(isKeyword) + // .filter(tr => { + // return tr.children[0].value === ''; + // }); + + // const summaryTrees = detailsStart.map((_, i) => { + // return findAllBetween(newTree, summaryStart[i], summaryEnd[i]); + // }); + + // const detailsTree = detailsStart.map((_, i) => { + // return findAllBetween(newTree, detailsStart[i], detailsEnd[i]); + // }); + + // const getIndexes = (tree) => { + // return tree.map((_, i) => { + // return newTree.children.indexOf(tree[i]) + // }) + // } + + // const detailsStartIndexes = getIndexes(detailsStart) + // const summaryStartIndexes = getIndexes(summaryStart) + // const summaryEndIndexes = getIndexes(summaryEnd) + // const detailsEndIndexes = getIndexes(detailsEnd) + + // // console.log(inspect(code)) + // console.log({ detailsStartIndexes, summaryStartIndexes, summaryEndIndexes, detailsEndIndexes }) + + // let prevCount = 0; + + // detailsStart.forEach((_, i) => { + // prevCount += !detailsTree[i - 1] ? 0 : detailsTree[i - 1].length + 1; + // newTree.children.splice(detailsStartIndexes[i] - prevCount + i, detailsTree[i].length + 1, ...[{ type: 'text', value: `${detailsStartIndexes[i]}` }]) + // }); + + // const cleanDetailsTrees = detailsStart.map((_, i) => { + // return detailsTree[i].splice(summaryTrees[i].length + 3) + // }) + + // const newDetailsTrees = detailsStart.map((_, i) => { + // return { + // type: 'element', + // tagName: 'details', + // properties: { + // open: false + // }, + // children: [ + // { + // type: 'element', + // tagName: 'summary', + // children: summaryTrees[i].splice(1) + // }, + // ...cleanDetailsTrees[i] + // ] + // } + // }) + + // // console.log(util.inspect(newTree.children.map((e, i) => ({ [i]: e})), { depth: 4, maxArrayLength: 300 })) + + // detailsStart.forEach((_, i) => { + // let insertPosition = newTree.children.findIndex(d => parseInt(d.value, 10) === detailsStartIndexes[i]) + + // newTree.children.splice(insertPosition, 1) + // newTree.children.splice(insertPosition, 0, newDetailsTrees[i]) + // }) + + // // console.log(util.inspect(newTree.children.map((e, i) => ({ [i]: e})), { depth: 4, maxArrayLength: 300 })) + + // // console.log(newTree.children) + + // data.hChildren = newTree.children; + // } catch (e) { + // console.log(e); + // throw e; + // } + data.hProperties = data.hProperties || {}; data.hProperties.className = ['hljs', ...(data.hProperties.className || []), `language-${lang}`]; } - }; + } } module.exports = attacher; diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx index 6bcc483c42a7..c5a0ec2dcb10 100644 --- a/src/components/Site/Site.jsx +++ b/src/components/Site/Site.jsx @@ -29,6 +29,54 @@ import './Site.scss'; // Load Content Tree import Content from '../../_content.json'; +import ConfigMD from '../../content/configuration/index.mdx'; +import { Modes, Entry } from '../../content/configuration/modes.js'; + +const components = { + mode: (props) => , + entry: (props) => +}; + +const Pre = props => { + + const newChildren = React.Children.map(props.children.props.children, (child, i) => { + if(React.isValidElement(child)) { + if(child.props.props.className.includes('keyword')) { + return components[child.props.props.componentname](child.props.children.slice(3, React.Children.count(child.props.children) - 4)); + } + } + + return child; + }); + + const newProps = { + children: newChildren + }; + + return ( + 
+      
+
+ ); +}; + +const DP = props => { + console.log('sesese'); + return 'DPDP'; +}; + +const Configuration = props => { + return ( + + + + ); +}; + class Site extends React.Component { state = { mobileSidebarOpen: false @@ -65,6 +113,7 @@ class Site extends React.Component { + ( diff --git a/src/content/configuration/index.md b/src/content/configuration/index.md deleted file mode 100644 index f79628a03a4b..000000000000 --- a/src/content/configuration/index.md +++ /dev/null @@ -1,403 +0,0 @@ ---- -title: Configuration -sort: 1 -contributors: - - sokra - - skipjack - - grgur - - bondz - - sricc - - terinjokes - - mattce - - kbariotis - - sterlingvix - - jeremenichelli - - dasarianudeep ---- - -Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is `src/index` and will output the result in `dist/main.js` minified and optimized for production. - -Usually your projects will need to extend this functionality, for this you can create a `webpack.config.js` file in the root folder and webpack will automatically use it. - -All the available configuration options are specified below. - -T> New to webpack? Check out our guide to some of webpack's [core concepts](/concepts) to get started! - - -## Use different config file - -If for some reason you want to use different config file depending on certain situations you can change this via command line by using the `--config` flag. - -**package.json** - -```json -"scripts": { - "build": "webpack --config prod.config.js" -} -``` - - -## Options - -Click on the name of each option in the configuration code below to jump to the detailed documentation. Also note that the items with arrows can be expanded to show more examples and, in some cases, more advanced configuration. - -W> Notice that throughout the configuration we use Node's built-in [path module](https://nodejs.org/api/path.html) and prefix it with the [__dirname](https://nodejs.org/docs/latest/api/globals.html#globals_dirname) global. This prevents file path issues between operating systems and allows relative paths to work as expected. See [this section](https://nodejs.org/api/path.html#path_windows_vs_posix) for more info on POSIX vs. Windows paths. - -__webpack.config.js__ - -```js-with-links-with-details -const path = require('path'); - -module.exports = { -
[mode](/concepts/mode): "production", // "production" | "development" | "none" - [mode](/concepts/mode): "production", // enable many optimizations for production builds - [mode](/concepts/mode): "development", // enabled useful tools for development - [mode](/concepts/mode): "none", // no defaults -
- // Chosen mode tells webpack to use its built-in optimizations accordingly. -
[entry](/configuration/entry-context#entry): "./app/entry", // string | object | array - [entry](/configuration/entry-context#entry): ["./app/entry1", "./app/entry2"], - [entry](/configuration/entry-context#entry): { - a: "./app/entry-a", - b: ["./app/entry-b1", "./app/entry-b2"] - }, -
- // defaults to ./src - // Here the application starts executing - // and webpack starts bundling - [output](/configuration/output): { - // options related to how webpack emits results - [path](/configuration/output#output-path): path.resolve(__dirname, "dist"), // string - // the target directory for all output files - // must be an absolute path (use the Node.js path module) -
[filename](/configuration/output#output-filename): "bundle.js", // string - [filename](/configuration/output#output-filename): "[name].js", // for multiple entry points - [filename](/configuration/output#output-filename): "[chunkhash].js", // for [long term caching](/guides/caching) -
- // the filename template for entry chunks -
[publicPath](/configuration/output#output-publicpath): "/assets/", // string - [publicPath](/configuration/output#output-publicpath): "", - [publicPath](/configuration/output#output-publicpath): "https://cdn.example.com/", -
- // the url to the output directory resolved relative to the HTML page - [library](/configuration/output#output-library): "MyLibrary", // string, - // the name of the exported library -
[libraryTarget](/configuration/output#output-librarytarget): "umd", // universal module definition - [libraryTarget](/configuration/output#output-librarytarget): "umd2", // universal module definition - [libraryTarget](/configuration/output#output-librarytarget): "commonjs2", // exported with module.exports - [libraryTarget](/configuration/output#output-librarytarget): "commonjs", // exported as properties to exports - [libraryTarget](/configuration/output#output-librarytarget): "amd", // defined with AMD defined method - [libraryTarget](/configuration/output#output-librarytarget): "this", // property set on this - [libraryTarget](/configuration/output#output-librarytarget): "var", // variable defined in root scope - [libraryTarget](/configuration/output#output-librarytarget): "assign", // blind assignment - [libraryTarget](/configuration/output#output-librarytarget): "window", // property set to window object - [libraryTarget](/configuration/output#output-librarytarget): "global", // property set to global object - [libraryTarget](/configuration/output#output-librarytarget): "jsonp", // jsonp wrapper -
- // the type of the exported library -
/* Advanced output configuration (click to show) */ - [pathinfo](/configuration/output#output-pathinfo): true, // boolean - // include useful path info about modules, exports, requests, etc. into the generated cod - [chunkFilename](/configuration/output#output-chunkfilename): "[id].js", - [chunkFilename](/configuration/output#output-chunkfilename): "[chunkhash].js", // for [long term caching](/guides/caching) - // the filename template for additional chunks - [jsonpFunction](/configuration/output#output-jsonpfunction): "myWebpackJsonp", // string - // name of the JSONP function used to load chunks - [sourceMapFilename](/configuration/output#output-sourcemapfilename): "[file].map", // string - [sourceMapFilename](/configuration/output#output-sourcemapfilename): "sourcemaps/[file].map", // string - // the filename template of the source map location - [devtoolModuleFilenameTemplate](/configuration/output#output-devtoolmodulefilenametemplate): "webpack:///[resource-path]", // string - // the name template for modules in a devtool - [devtoolFallbackModuleFilenameTemplate](/configuration/output#output-devtoolfallbackmodulefilenametemplate): "webpack:///[resource-path]?[hash]", // string - // the name template for modules in a devtool (used for conflicts) - [umdNamedDefine](/configuration/output#output-umdnameddefine): true, // boolean - // use a named AMD module in UMD library - [crossOriginLoading](/configuration/output#output-crossoriginloading): "use-credentials", // enum - [crossOriginLoading](/configuration/output#output-crossoriginloading): "anonymous", - [crossOriginLoading](/configuration/output#output-crossoriginloading): false, - // specifies how cross origin request are issued by the runtime -
/* Expert output configuration (on own risk) */ - [devtoolLineToLine](/configuration/output#output-devtoollinetoline): { - test: /\.jsx$/ - }, - // use a simple 1:1 mapped SourceMaps for these modules (faster) - [hotUpdateMainFilename](/configuration/output#output-hotupdatemainfilename): "[hash].hot-update.json", // string - // filename template for HMR manifest - [hotUpdateChunkFilename](/configuration/output#output-hotupdatechunkfilename): "[id].[hash].hot-update.js", // string - // filename template for HMR chunks - [sourcePrefix](/configuration/output#output-sourceprefix): "\t", // string - // prefix module sources in bundle for better readablitity -
-
- }, - [module](/configuration/module): { - // configuration regarding modules - [rules](/configuration/module#module-rules): [ - // rules for modules (configure loaders, parser options, etc.) - { - [test](/configuration/module#rule-test): /\.jsx?$/, - [include](/configuration/module#rule-include): [ - path.resolve(__dirname, "app") - ], - [exclude](/configuration/module#rule-exclude): [ - path.resolve(__dirname, "app/demo-files") - ], - // these are matching conditions, each accepting a regular expression or string - // test and include have the same behavior, both must be matched - // exclude must not be matched (takes preferrence over test and include) - // Best practices: - // - Use RegExp only in test and for filename matching - // - Use arrays of absolute paths in include and exclude - // - Try to avoid exclude and prefer include - [issuer](/configuration/module#rule-issuer): { test, include, exclude }, - // conditions for the issuer (the origin of the import) - [enforce](/configuration/module#rule-enforce): "pre", - [enforce](/configuration/module#rule-enforce): "post", - // flags to apply these rules, even if they are overridden (advanced option) - [loader](/configuration/module#rule-loader): "babel-loader", - // the loader which should be applied, it'll be resolved relative to the context - // -loader suffix is no longer optional in webpack2 for clarity reasons - // see [webpack 1 upgrade guide](/guides/migrating) - [options](/configuration/module#rule-options-rule-query): { - presets: ["es2015"] - }, - // options for the loader - }, - { - [test](/configuration/module#rule-test): /\.html$/, - [use](/configuration/module#rule-use): [ - // apply multiple loaders and options - "htmllint-loader", - { - loader: "html-loader", - options: { - /* ... */ - } - } - ] - }, - { [oneOf](/configuration/module#rule-oneof): [ /* rules */ ] }, - // only use one of these nested rules - { [rules](/configuration/module#rule-rules): [ /* rules */ ] }, - // use all of these nested rules (combine with conditions to be useful) - { [resource](/configuration/module#rule-resource): { [and](/configuration/module#condition): [ /* conditions */ ] } }, - // matches only if all conditions are matched - { [resource](/configuration/module#rule-resource): { [or](/configuration/module#condition): [ /* conditions */ ] } }, - { [resource](/configuration/module#rule-resource): [ /* conditions */ ] }, - // matches if any condition is matched (default for arrays) - { [resource](/configuration/module#rule-resource): { [not](/configuration/module#condition): /* condition */ } } - // matches if the condition is not matched - ], -
/* Advanced module configuration (click to show) */ - [noParse](/configuration/module#module-noparse): [ - /special-library\.js$/ - ], - // do not parse this module - unknownContextRequest: ".", - unknownContextRecursive: true, - unknownContextRegExp: /^\.\/.*$/, - unknownContextCritical: true, - exprContextRequest: ".", - exprContextRegExp: /^\.\/.*$/, - exprContextRecursive: true, - exprContextCritical: true, - wrappedContextRegExp: /.*/, - wrappedContextRecursive: true, - wrappedContextCritical: false, - // specifies default behavior for dynamic requests -
- }, - [resolve](/configuration/resolve): { - // options for resolving module requests - // (does not apply to resolving to loaders) - [modules](/configuration/resolve#resolve-modules): [ - "node_modules", - path.resolve(__dirname, "app") - ], - // directories where to look for modules - [extensions](/configuration/resolve#resolve-extensions): [".js", ".json", ".jsx", ".css"], - // extensions that are used - [alias](/configuration/resolve#resolve-alias): { - // a list of module name aliases - "module": "new-module", - // alias "module" -> "new-module" and "module/path/file" -> "new-module/path/file" - "only-module$": "new-module", - // alias "only-module" -> "new-module", but not "only-module/path/file" -> "new-module/path/file" - "module": path.resolve(__dirname, "app/third/module.js"), - // alias "module" -> "./app/third/module.js" and "module/file" results in error - // modules aliases are imported relative to the current context - }, -
/* alternative alias syntax (click to show) */ - [alias](/configuration/resolve#resolve-alias): [ - { - name: "module", - // the old request - alias: "new-module", - // the new request - onlyModule: true - // if true only "module" is aliased - // if false "module/inner/path" is also aliased - } - ], -
-
/* Advanced resolve configuration (click to show) */ - [symlinks](/configuration/resolve#resolve-symlinks): true, - // follow symlinks to new location - [descriptionFiles](/configuration/resolve#resolve-descriptionfiles): ["package.json"], - // files that are read for package description - [mainFields](/configuration/resolve#resolve-mainfields): ["main"], - // properties that are read from description file - // when a folder is requested - [aliasFields](/configuration/resolve#resolve-aliasfields): ["browser"], - // properites that are read from description file - // to alias requests in this package - [enforceExtension](/configuration/resolve#resolve-enforceextension): false, - // if true request must not include an extensions - // if false request may already include an extension - [moduleExtensions](/configuration/resolve#resolveloader-moduleextensions): ["-module"], - [enforceModuleExtension](/configuration/resolve#resolve-enforcemoduleextension): false, - // like extensions/enforceExtension but for module names instead of files - [unsafeCache](/configuration/resolve#resolve-unsafecache): true, - [unsafeCache](/configuration/resolve#resolve-unsafecache): {}, - // enables caching for resolved requests - // this is unsafe as folder structure may change - // but performance improvement is really big - [cachePredicate](/configuration/resolve#resolve-cachepredicate): (path, request) => true, - // predicate function which selects requests for caching - [plugins](/configuration/resolve#resolve-plugins): [ - // ... - ] - // additional plugins applied to the resolver -
- }, - [performance](/configuration/performance): { -
[hints](/configuration/performance#performance-hints): "warning", // enum - [hints](/configuration/performance#performance-hints): "error", // emit errors for perf hints - [hints](/configuration/performance#performance-hints): false, // turn off perf hints -
- [maxAssetSize](/configuration/performance#performance-maxassetsize): 200000, // int (in bytes), - [maxEntrypointSize](/configuration/performance#performance-maxentrypointsize): 400000, // int (in bytes) - [assetFilter](/configuration/performance#performance-assetfilter): function(assetFilename) { - // Function predicate that provides asset filenames - return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); - } - }, -
[devtool](/configuration/devtool): "source-map", // enum - [devtool](/configuration/devtool): "inline-source-map", // inlines SourceMap into original file - [devtool](/configuration/devtool): "eval-source-map", // inlines SourceMap per module - [devtool](/configuration/devtool): "hidden-source-map", // SourceMap without reference in original file - [devtool](/configuration/devtool): "cheap-source-map", // cheap-variant of SourceMap without module mappings - [devtool](/configuration/devtool): "cheap-module-source-map", // cheap-variant of SourceMap with module mappings - [devtool](/configuration/devtool): "eval", // no SourceMap, but named modules. Fastest at the expense of detail. -
- // enhance debugging by adding meta info for the browser devtools - // source-map most detailed at the expense of build speed. - [context](/configuration/entry-context#context): __dirname, // string (absolute path!) - // the home directory for webpack - // the [entry](/configuration/entry-context) and [module.rules.loader](/configuration/module#rule-loader) option - // is resolved relative to this directory -
[target](/configuration/target): "web", // enum - [target](/configuration/target): "webworker", // WebWorker - [target](/configuration/target): "node", // Node.js via require - [target](/configuration/target): "async-node", // Node.js via fs and vm - [target](/configuration/target): "node-webkit", // nw.js - [target](/configuration/target): "electron-main", // electron, main process - [target](/configuration/target): "electron-renderer", // electron, renderer process - [target](/configuration/target): (compiler) => { /* ... */ }, // custom -
- // the environment in which the bundle should run - // changes chunk loading behavior and available modules -
[externals](/configuration/externals): ["react", /^@angular\//], - [externals](/configuration/externals): "react", // string (exact match) - [externals](/configuration/externals): /^[a-z\-]+($|\/)/, // Regex - [externals](/configuration/externals): { // object - angular: "this angular", // this["angular"] - react: { // UMD - commonjs: "react", - commonjs2: "react", - amd: "react", - root: "React" - } - }, - [externals](/configuration/externals): (request) => { /* ... */ return "commonjs " + request } -
- // Don't follow/bundle these modules, but request them at runtime from the environment - [serve](https://github.com/webpack-contrib/webpack-serve#options): { //object - port: 1337, - content: './dist', - // ... - }, - // lets you provide options for webpack-serve -
[stats](/configuration/stats): "errors-only", - [stats](/configuration/stats): { //object - assets: true, - colors: true, - errors: true, - errorDetails: true, - hash: true, - // ... - }, -
- // lets you precisely control what bundle information gets displayed - [devServer](/configuration/dev-server): { - proxy: { // proxy URLs to backend development server - '/api': 'http://localhost:3000' - }, - contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location - compress: true, // enable gzip compression - historyApiFallback: true, // true for index.html upon 404, object for multiple paths - hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin - https: false, // true for self-signed, object for cert authority - noInfo: true, // only errors & warns on hot reload - // ... - }, - [plugins](plugins): [ - // ... - ], - // list of additional plugins -
/* Advanced configuration (click to show) */ - [resolveLoader](/configuration/resolve#resolveloader): { /* same as resolve */ } - // separate resolve options for loaders - [parallelism](other-options#parallelism): 1, // number - // limit the number of parallel processed modules - [profile](other-options#profile): true, // boolean - // capture timing information - [bail](other-options#bail): true, //boolean - // fail out on the first error instead of tolerating it. - [cache](other-options#cache): false, // boolean - // disable/enable caching - [watch](watch#watch): true, // boolean - // enables watching - [watchOptions](watch#watchoptions): { - [aggregateTimeout](watch#watchoptions-aggregatetimeout): 1000, // in ms - // aggregates multiple changes to a single rebuild - [poll](watch#watchoptions-poll): true, - [poll](watch#watchoptions-poll): 500, // intervall in ms - // enables polling mode for watching - // must be used on filesystems that doesn't notify on change - // i. e. nfs shares - }, - [node](node): { - // Polyfills and mocks to run Node.js- - // environment code in non-Node environments. - [console](node#node-console): false, // boolean | "mock" - [global](node#node-global): true, // boolean | "mock" - [process](node#node-process): true, // boolean - [__filename](node#node-__filename): "mock", // boolean | "mock" - [__dirname](node#node-__dirname): "mock", // boolean | "mock" - [Buffer](node#node-buffer): true, // boolean | "mock" - [setImmediate](node#node-setimmediate): true // boolean | "mock" | "empty" - }, - [recordsPath](other-options#recordspath): path.resolve(__dirname, "build/records.json"), - [recordsInputPath](other-options#recordsinputpath): path.resolve(__dirname, "build/records.json"), - [recordsOutputPath](other-options#recordsoutputpath): path.resolve(__dirname, "build/records.json"), - // TODO -
-} -``` - -T> Want to rapidly generate webpack configuration file for your project requirements with few clicks away. - -[Generate Custom Webpack Configuration](https://generatewebpackconfig.netlify.com/) is an interactive portal you can play around by selecting custom webpack configuration options tailored for your frontend project. It automatically generates -a minimal webpack configuration based on your selection of loaders/plugins, etc. - diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx new file mode 100644 index 000000000000..6e6ff52982a4 --- /dev/null +++ b/src/content/configuration/index.mdx @@ -0,0 +1,19 @@ +--- +title: Test +sort: 2 +--- + +A paragraph + +```js-with-links-with-details +const path = require('path'); + +module.exports = { + + mode: "production", // "production" | "development" | "none" // Chosen mode tells webpack to use its built-in optimizations accordingly. + + + entry: "./app/entry", // string | object | array // defaults to ./src + +} +``` diff --git a/src/content/configuration/modes.js b/src/content/configuration/modes.js new file mode 100644 index 000000000000..952dd744e449 --- /dev/null +++ b/src/content/configuration/modes.js @@ -0,0 +1,10 @@ +import React from 'react'; +import Dropdown from 'react-dropdown'; + +export const Modes = props => { + return {props.children}; +}; + +export const Entry = props => { + return {props.children}; +}; diff --git a/webpack.common.js b/webpack.common.js index 0d6adfb7eb6c..eac8cca9d6bf 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -20,43 +20,55 @@ module.exports = (env = {}) => ({ }, module: { rules: [ + { + test: /\.mdx$/, + use: [ + 'babel-loader', + { + loader: '@mdx-js/loader', + options: { + mdPlugins: [require('./prism')] + } + } + ] + }, { test: /\.md$/, use: { loader: 'remark-loader', options: { plugins: [ - require('remark-slug'), - require('remark-mermaid'), - require('remark-refractor'), - [ - require('remark-custom-blockquotes'), - { - mapping: { - 'T>': 'tip', - 'W>': 'warning', - '?>': 'todo' - } - } - ], - [ - require('@rigor789/remark-autolink-headings'), - { - behaviour: 'append' - } - ], - [ - require('remark-responsive-tables'), - { - classnames: { - title: 'title', - description: 'description', - content: 'content', - mobile: 'mobile', - desktop: 'desktop' - } - } - ] + // require('remark-slug'), + // require('remark-mermaid'), + // require('remark-refractor'), + // [ + // require('remark-custom-blockquotes'), + // { + // mapping: { + // 'T>': 'tip', + // 'W>': 'warning', + // '?>': 'todo' + // } + // } + // ], + // [ + // require('@rigor789/remark-autolink-headings'), + // { + // behaviour: 'append' + // } + // ], + // [ + // require('remark-responsive-tables'), + // { + // classnames: { + // title: 'title', + // description: 'description', + // content: 'content', + // mobile: 'mobile', + // desktop: 'desktop' + // } + // } + // ] ] } } diff --git a/yarn.lock b/yarn.lock index 05271221df3a..864268058c89 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8,6 +8,30 @@ dependencies: unist-util-visit "^1.3.0" +"@mdx-js/loader@0.15.0": + version "0.15.0" + resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-0.15.0.tgz#05a36267d5a491ae1981508a3e662eaf848f6ad3" + dependencies: + "@mdx-js/tag" "^0.15.0" + +"@mdx-js/mdx@0.15.0": + version "0.15.0" + resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-0.15.0.tgz#34c6516fb28c518e3d8ed388ca282a148e2125d3" + dependencies: + mdast-util-to-hast "^3.0.0" + remark-parse "^5.0.0" + remark-squeeze-paragraphs "^3.0.1" + unified "^6.1.6" + unist-util-visit "^1.3.0" + +"@mdx-js/tag@^0.15.0": + version "0.15.0" + resolved "https://registry.yarnpkg.com/@mdx-js/tag/-/tag-0.15.0.tgz#a98949206cc21b27a56a11550b41229631eb8b1c" + dependencies: + create-react-context "^0.2.2" + hoist-non-react-statics "^2.5.5" + prop-types "^15.6.1" + "@octokit/rest@^15.2.6": version "15.9.4" resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-15.9.4.tgz#c6cf0f483275d9c798b18419b7c9d417493bb70f" @@ -1559,6 +1583,10 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.3: + version "2.2.6" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" + clean-css@4.1.x: version "4.1.11" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a" @@ -1945,6 +1973,13 @@ create-react-class@^15.5.1, create-react-class@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" +create-react-context@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca" + dependencies: + fbjs "^0.8.0" + gud "^1.0.0" + createerror@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/createerror/-/createerror-1.2.0.tgz#5881f9abdfc2826fd1c3cf09adffe6da2ec74909" @@ -2059,6 +2094,10 @@ css-select@^1.1.0, css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" +css-selector-parser@^1.1.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.3.0.tgz#5f1ad43e2d8eefbfdc304fcd39a521664943e3eb" + css-selector-tokenizer@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86" @@ -3086,7 +3125,7 @@ fbjs@^0.6.1: ua-parser-js "^0.7.9" whatwg-fetch "^0.9.0" -fbjs@^0.8.16, fbjs@^0.8.9: +fbjs@^0.8.0, fbjs@^0.8.16, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" dependencies: @@ -3697,6 +3736,10 @@ graceful-fs@4.1.11, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6: version "1.0.1" resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" +gud@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" + handle-thing@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4" @@ -3898,7 +3941,7 @@ hogan.js@^3.0.2: mkdirp "0.3.0" nopt "1.0.10" -hoist-non-react-statics@^2.5.0: +hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^2.5.5: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" @@ -5320,6 +5363,12 @@ mdast-comment-marker@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/mdast-comment-marker/-/mdast-comment-marker-1.0.2.tgz#1ddf0ef811fb52439017c8d2c0b922035f2ba74a" +mdast-squeeze-paragraphs@^3.0.0: + version "3.0.3" + resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.3.tgz#eb40b48b0d63573afad651d2623806090397d5d0" + dependencies: + unist-util-remove "^1.0.0" + mdast-util-compact@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.1.tgz#cdb5f84e2b6a2d3114df33bd05d9cb32e3c4083a" @@ -5931,7 +5980,7 @@ npm-which@^3.0.1: gauge "~2.7.3" set-blocking "~2.0.0" -nth-check@~1.0.1: +nth-check@^1.0.1, nth-check@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4" dependencies: @@ -6978,6 +7027,12 @@ react-dom@^16.2.0: object-assign "^4.1.1" prop-types "^15.6.0" +react-dropdown@1.6.2: + version "1.6.2" + resolved "https://registry.yarnpkg.com/react-dropdown/-/react-dropdown-1.6.2.tgz#13ace229f1749f942cd0ec7eb221cb1a22788db7" + dependencies: + classnames "^2.2.3" + react-g-analytics@0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/react-g-analytics/-/react-g-analytics-0.4.2.tgz#8e0b02d595cf5011dbffd2f697437bebed0972aa" @@ -7461,6 +7516,12 @@ remark-slug@^5.0.0: mdast-util-to-string "^1.0.0" unist-util-visit "^1.0.0" +remark-squeeze-paragraphs@^3.0.1: + version "3.0.2" + resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.2.tgz#c3d1459cb17c250180fdc8f9814224b44d952b90" + dependencies: + mdast-squeeze-paragraphs "^3.0.0" + remark-stringify@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-4.0.0.tgz#4431884c0418f112da44991b4e356cfe37facd87" @@ -8958,7 +9019,7 @@ unified-message-control@^1.0.0: unist-util-visit "^1.0.0" vfile-location "^2.0.0" -unified@^6.0.0, unified@^6.1.0, unified@^6.1.2: +unified@^6.0.0, unified@^6.1.0, unified@^6.1.2, unified@^6.1.6: version "6.2.0" resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba" dependencies: @@ -9052,12 +9113,20 @@ unist-util-remove-position@^1.0.0: dependencies: unist-util-visit "^1.1.0" -unist-util-remove@1.0.1: +unist-util-remove@1.0.1, unist-util-remove@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.1.tgz#3e967d2aeb3ee9e7f0ee8354172986fba7ff33a5" dependencies: unist-util-is "^2.0.0" +unist-util-select@1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/unist-util-select/-/unist-util-select-1.5.0.tgz#a93c2be8c0f653827803b81331adec2aa24cd933" + dependencies: + css-selector-parser "^1.1.0" + debug "^2.2.0" + nth-check "^1.0.1" + unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6" From 21272f6839847218c2840cd3c8f4e74e0ac7f0e7 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Fri, 24 Aug 2018 16:08:12 +0200 Subject: [PATCH 07/20] Integration with our infra --- jsLinks.js | 2 +- prism.js | 3 +- src/components/Page/Page.jsx | 118 ++++++-- src/components/Site/Site.jsx | 49 ---- src/content/configuration/index.mdx | 412 +++++++++++++++++++++++++++- src/utilities/content-utils.js | 2 +- webpack.common.js | 97 ++++--- webpack.dev.js | 2 +- 8 files changed, 564 insertions(+), 121 deletions(-) diff --git a/jsLinks.js b/jsLinks.js index 8dd2470f9202..dafa377a14df 100644 --- a/jsLinks.js +++ b/jsLinks.js @@ -6,7 +6,7 @@ jslinks.aliases = []; function jslinks(Prism) { Prism.languages["js-with-links-with-details"] = Prism.languages.extend("javascript", { keyword: { - pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/, + pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/gi, greedy: true, inside: { // punctuation: /()/, diff --git a/prism.js b/prism.js index de43d10b9b15..61e92fcaad2b 100644 --- a/prism.js +++ b/prism.js @@ -13,6 +13,7 @@ var find = require('unist-util-find'); var findAllBetween = require('unist-util-find-all-between'); refractor.register(require('./jsLinks.js')); +refractor.register(require('refractor/lang/json')) var fs = require('fs'); @@ -75,6 +76,7 @@ function attacher({ include, exclude } = {}) { return transformer; function transformer(tree, file) { + // console.log(tree) visit(tree, 'code', visitor); function visitor(node) { @@ -92,7 +94,6 @@ function attacher({ include, exclude } = {}) { try { data.hChildren = refractor.highlight(node.value, lang); - data.hChildren.forEach(node => { if(node.properties && node.properties.className.includes('keyword')) { node.properties.componentname = node.children[1].value diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx index bfbf5c7f46ba..2ac2d0fc562d 100644 --- a/src/components/Page/Page.jsx +++ b/src/components/Page/Page.jsx @@ -6,10 +6,54 @@ import PageLinks from '../PageLinks/PageLinks'; import Markdown from '../Markdown/Markdown'; import Contributors from '../Contributors/Contributors'; import Placeholder from '../Placeholder/Placeholder'; +import { Modes, Entry } from '../../content/configuration/modes.js'; // Load Styling import './Page.scss'; +const components = { + mode: props => , + entry: props => , + filename: props => , + publicPath: props => , + advancedOutput: props => , + expert: props => , + advancedModule: props => , + alias: props => , + advancedResolve: props => , + hints: props => , + devtool: props => , + target: props => , + externals: props => , + stats: props => , + advanced: props => , + libraryTarget: props => +}; + +const Pre = props => { + const newChildren = React.Children.map(props.children.props.children, (child, i) => { + if (React.isValidElement(child)) { + if (child.props.props.className.includes('keyword')) { + return components[child.props.props.componentname]( + child.props.children.slice(3, React.Children.count(child.props.children) - 4) + ); + } + } + + return child; + }); + + const newProps = { + children: newChildren + }; + + return ( + 
+      
+
+ ); +}; + class Page extends React.Component { constructor(props) { super(props); @@ -28,62 +72,76 @@ class Page extends React.Component { if (content instanceof Promise) { content - .then(module => this.setState({ - content: module.default || module, - contentLoaded: true - })) - .catch(error => this.setState({ - content: 'Error loading content.' - })); + .then(module => + this.setState({ + content: module.default || module, + contentLoaded: true + }) + ) + .catch(error => + this.setState({ + content: 'Error loading content.' + }) + ); } } render() { - const { - title, - contributors = [], - related = [], - ...rest - } = this.props; + const { title, contributors = [], related = [], ...rest } = this.props; const { contentLoaded } = this.state; const loadRelated = contentLoaded && related && related.length !== 0; const loadContributors = contentLoaded && contributors && contributors.length !== 0; + const { content } = this.state; + + let contentRender; + + if (typeof content === 'function') { + contentRender = content({ + components: { + pre: Pre, + hr: (props) => null + } + }); + } else { + contentRender = ( +
+ ); + } + return (
- + -

{ title }

+

{title}

-
+ {contentRender} - { loadRelated && ( + {loadRelated && (

Further Reading

)} - { loadContributors && ( + {loadContributors && (

Contributors

- +
)} diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx index c5a0ec2dcb10..6bcc483c42a7 100644 --- a/src/components/Site/Site.jsx +++ b/src/components/Site/Site.jsx @@ -29,54 +29,6 @@ import './Site.scss'; // Load Content Tree import Content from '../../_content.json'; -import ConfigMD from '../../content/configuration/index.mdx'; -import { Modes, Entry } from '../../content/configuration/modes.js'; - -const components = { - mode: (props) => , - entry: (props) => -}; - -const Pre = props => { - - const newChildren = React.Children.map(props.children.props.children, (child, i) => { - if(React.isValidElement(child)) { - if(child.props.props.className.includes('keyword')) { - return components[child.props.props.componentname](child.props.children.slice(3, React.Children.count(child.props.children) - 4)); - } - } - - return child; - }); - - const newProps = { - children: newChildren - }; - - return ( - 
-      
-
- ); -}; - -const DP = props => { - console.log('sesese'); - return 'DPDP'; -}; - -const Configuration = props => { - return ( - - - - ); -}; - class Site extends React.Component { state = { mobileSidebarOpen: false @@ -113,7 +65,6 @@ class Site extends React.Component { - ( diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx index 6e6ff52982a4..607785b6ba5d 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -1,19 +1,419 @@ --- -title: Test -sort: 2 +title: Configuration +sort: 1 +contributors: + - sokra + - skipjack + - grgur + - bondz + - sricc + - terinjokes + - mattce + - kbariotis + - sterlingvix + - jeremenichelli + - dasarianudeep --- -A paragraph +Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is `src/index` and will output the result in `dist/main.js` minified and optimized for production. + +Usually your projects will need to extend this functionality, for this you can create a `webpack.config.js` file in the root folder and webpack will automatically use it. + +All the available configuration options are specified below. + +T> New to webpack? Check out our guide to some of webpack's [core concepts](/concepts) to get started! + + +## Use different config file + +If for some reason you want to use different config file depending on certain situations you can change this via command line by using the `--config` flag. + +**package.json** + +```json +"scripts": { + "build": "webpack --config prod.config.js" +} +``` + + +## Options + +Click on the name of each option in the configuration code below to jump to the detailed documentation. Also note that the items with arrows can be expanded to show more examples and, in some cases, more advanced configuration. + +W> Notice that throughout the configuration we use Node's built-in [path module](https://nodejs.org/api/path.html) and prefix it with the [__dirname](https://nodejs.org/docs/latest/api/globals.html#globals_dirname) global. This prevents file path issues between operating systems and allows relative paths to work as expected. See [this section](https://nodejs.org/api/path.html#path_windows_vs_posix) for more info on POSIX vs. Windows paths. + +__webpack.config.js__ ```js-with-links-with-details const path = require('path'); module.exports = { - mode: "production", // "production" | "development" | "none" // Chosen mode tells webpack to use its built-in optimizations accordingly. + mode: "production", // "production" | "development" | "none" + mode: "production", // enable many optimizations for production builds + mode: "development", // enabled useful tools for development + mode: "none", // no defaults + // Chosen mode tells webpack to use its built-in optimizations accordingly. - entry: "./app/entry", // string | object | array // defaults to ./src + entry: "./app/entry", // string | object | array + entry: ["./app/entry1", "./app/entry2"], + entry: { + a: "./app/entry-a", + b: ["./app/entry-b1", "./app/entry-b2"] + }, -} + // defaults to ./src + // Here the application starts executing + // and webpack starts bundling + output: { + // options related to how webpack emits results + path: path.resolve(__dirname, "dist"), // string + // the target directory for all output files + // must be an absolute path (use the Node.js path module) + + filename: "bundle.js", // string + filename: "[name].js", // for multiple entry points + filename: "[chunkhash].js", // for long term caching + + // the filename template for entry chunks + + publicPath: "/assets/", // string + publicPath: "", + publicPath: "https://cdn.example.com/", + + // the url to the output directory resolved relative to the HTML page + library: "MyLibrary", // string, + // the name of the exported library + + libraryTarget: "umd", // universal module definition + libraryTarget: "umd2", // universal module definition + libraryTarget: "commonjs2", // exported with module.exports + libraryTarget: "commonjs", // exported as properties to exports + libraryTarget: "amd", // defined with AMD defined method + libraryTarget: "this", // property set on this + libraryTarget: "var", // variable defined in root scope + libraryTarget: "assign", // blind assignment + libraryTarget: "window", // property set to window object + libraryTarget: "global", // property set to global object + libraryTarget: "jsonp", // jsonp wrapper + + // the type of the exported library + + /* Advanced output configuration (click to show) */ + pathinfo: true, // boolean + // include useful path info about modules, exports, requests, etc. into the generated cod + chunkFilename: "[id].js", + chunkFilename: "[chunkhash].js", // for long term caching + // the filename template for additional chunks + jsonpFunction: "myWebpackJsonp", // string + // name of the JSONP function used to load chunks + sourceMapFilename: "[file].map", // string + sourceMapFilename: "sourcemaps/[file].map", // string + // the filename template of the source map location + devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string + // the name template for modules in a devtool + devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string + // the name template for modules in a devtool (used for conflicts) + umdNamedDefine: true, // boolean + // use a named AMD module in UMD library + crossOriginLoading: "use-credentials", // enum + crossOriginLoading: "anonymous", + crossOriginLoading: false, + // specifies how cross origin request are issued by the runtime + + + /* Expert output configuration (on own risk) */ + devtoolLineToLine: { + test: /\.jsx$/ + }, + // use a simple 1:1 mapped SourceMaps for these modules (faster) + hotUpdateMainFilename: "[hash].hot-update.json", // string + // filename template for HMR manifest + hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string + // filename template for HMR chunks + sourcePrefix: "\t", // string + // prefix module sources in bundle for better readablitity + + }, + module: { + // configuration regarding modules + rules: [ + // rules for modules (configure loaders, parser options, etc.) + { + test: /\.jsx?$/, + include: [ + path.resolve(__dirname, "app") + ], + exclude: [ + path.resolve(__dirname, "app/demo-files") + ], + // these are matching conditions, each accepting a regular expression or string + // test and include have the same behavior, both must be matched + // exclude must not be matched (takes preferrence over test and include) + // Best practices: + // - Use RegExp only in test and for filename matching + // - Use arrays of absolute paths in include and exclude + // - Try to avoid exclude and prefer include + issuer: { test, include, exclude }, + // conditions for the issuer (the origin of the import) + enforce: "pre", + enforce: "post", + // flags to apply these rules, even if they are overridden (advanced option) + loader: "babel-loader", + // the loader which should be applied, it'll be resolved relative to the context + // -loader suffix is no longer optional in webpack2 for clarity reasons + // see webpack 1 upgrade guide + options: { + presets: ["es2015"] + }, + // options for the loader + }, + { + test: /\.html$/, + use: [ + // apply multiple loaders and options + "htmllint-loader", + { + loader: "html-loader", + options: { + /* ... */ + } + } + ] + }, + { oneOf: [ /* rules */ ] }, + // only use one of these nested rules + { rules: [ /* rules */ ] }, + // use all of these nested rules (combine with conditions to be useful) + { resource: { and: [ /* conditions */ ] } }, + // matches only if all conditions are matched + { resource: { or: [ /* conditions */ ] } }, + { resource: [ /* conditions */ ] }, + // matches if any condition is matched (default for arrays) + { resource: { not: /* condition */ } } + // matches if the condition is not matched + ], + + /* Advanced module configuration (click to show) */ + noParse: [ + /special-library\.js$/ + ], + // do not parse this module + unknownContextRequest: ".", + unknownContextRecursive: true, + unknownContextRegExp: /^\.\/.*$/, + unknownContextCritical: true, + exprContextRequest: ".", + exprContextRegExp: /^\.\/.*$/, + exprContextRecursive: true, + exprContextCritical: true, + wrappedContextRegExp: /.*/, + wrappedContextRecursive: true, + wrappedContextCritical: false, + // specifies default behavior for dynamic requests + + }, + resolve: { + // options for resolving module requests + // (does not apply to resolving to loaders) + modules: [ + "node_modules", + path.resolve(__dirname, "app") + ], + // directories where to look for modules + extensions: [".js", ".json", ".jsx", ".css"], + // extensions that are used + alias: { + // a list of module name aliases + "module": "new-module", + // alias "module" -> "new-module" and "module/path/file" -> "new-module/path/file" + "only-module$": "new-module", + // alias "only-module" -> "new-module", but not "only-module/path/file" -> "new-module/path/file" + "module": path.resolve(__dirname, "app/third/module.js"), + // alias "module" -> "./app/third/module.js" and "module/file" results in error + // modules aliases are imported relative to the current context + }, + + /* alternative alias syntax (click to show) */ + alias: [ + { + name: "module", + // the old request + alias: "new-module", + // the new request + onlyModule: true + // if true only "module" is aliased + // if false "module/inner/path" is also aliased + } + ], + + + /* Advanced resolve configuration (click to show) */ + symlinks: true, + // follow symlinks to new location + descriptionFiles: ["package.json"], + // files that are read for package description + mainFields: ["main"], + // properties that are read from description file + // when a folder is requested + aliasFields: ["browser"], + // properites that are read from description file + // to alias requests in this package + enforceExtension: false, + // if true request must not include an extensions + // if false request may already include an extension + moduleExtensions: ["-module"], + enforceModuleExtension: false, + // like extensions/enforceExtension but for module names instead of files + unsafeCache: true, + unsafeCache: {}, + // enables caching for resolved requests + // this is unsafe as folder structure may change + // but performance improvement is really big + cachePredicate: (path, request) => true, + // predicate function which selects requests for caching + plugins: [ + // ... + ] + // additional plugins applied to the resolver + + }, + performance: { + + hints: "warning", // enum + hints: "error", // emit errors for perf hints + hints: false, // turn off perf hints + + maxAssetSize: 200000, // int (in bytes), + maxEntrypointSize: 400000, // int (in bytes) + assetFilter: function(assetFilename) { + // Function predicate that provides asset filenames + return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); + } + }, + + devtool: "source-map", // enum + devtool: "inline-source-map", // inlines SourceMap into original file + devtool: "eval-source-map", // inlines SourceMap per module + devtool: "hidden-source-map", // SourceMap without reference in original file + devtool: "cheap-source-map", // cheap-variant of SourceMap without module mappings + devtool: "cheap-module-source-map", // cheap-variant of SourceMap with module mappings + devtool: "eval", // no SourceMap, but named modules. Fastest at the expense of detail. + + // enhance debugging by adding meta info for the browser devtools + // source-map most detailed at the expense of build speed. + context: __dirname, // string (absolute path!) + // the home directory for webpack + // the entry and module.rules.loader option + // is resolved relative to this directory + + target: "web", // enum + target: "webworker", // WebWorker + target: "node", // Node.js via require + target: "async-node", // Node.js via fs and vm + target: "node-webkit", // nw.js + target: "electron-main", // electron, main process + target: "electron-renderer", // electron, renderer process + target: (compiler) => { /* ... */ }, // custom + + // the environment in which the bundle should run + // changes chunk loading behavior and available modules + + externals: ["react", /^@angular/], + externals: "react", // string (exact match) + externals: /^[a-z\-]+($|\/)/, // Regex + externals: { // object + angular: "this angular", // this["angular"] + react: { // UMD + commonjs: "react", + commonjs2: "react", + amd: "react", + root: "React" + } + }, + externals: (request) => { /* ... */ return "commonjs " + request } + + // Don't follow/bundle these modules, but request them at runtime from the environment + serve: { //object + port: 1337, + content: './dist', + // ... + }, + // lets you provide options for webpack-serve + + stats: "errors-only", + stats: { //object + assets: true, + colors: true, + errors: true, + errorDetails: true, + hash: true, + // ... + }, + + // lets you precisely control what bundle information gets displayed + devServer: { + proxy: { // proxy URLs to backend development server + '/api': 'http://localhost:3000' + }, + contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location + compress: true, // enable gzip compression + historyApiFallback: true, // true for index.html upon 404, object for multiple paths + hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin + https: false, // true for self-signed, object for cert authority + noInfo: true, // only errors & warns on hot reload + // ... + }, + plugins: [ + // ... + ], + // list of additional plugins + + /* Advanced configuration (click to show) */ + resolveLoader: { /* same as resolve */ } + // separate resolve options for loaders + parallelism: 1, // number + // limit the number of parallel processed modules + profile: true, // boolean + // capture timing information + bail: true, //boolean + // fail out on the first error instead of tolerating it. + cache: false, // boolean + // disable/enable caching + watch: true, // boolean + // enables watching + watchOptions: { + aggregateTimeout: 1000, // in ms + // aggregates multiple changes to a single rebuild + poll: true, + poll: 500, // intervall in ms + // enables polling mode for watching + // must be used on filesystems that doesn't notify on change + // i. e. nfs shares + }, + node: { + // Polyfills and mocks to run Node.js- + // environment code in non-Node environments. + console: false, // boolean | "mock" + global: true, // boolean | "mock" + process: true, // boolean + __filename: "mock", // boolean | "mock" + __dirname: "mock", // boolean | "mock" + Buffer: true, // boolean | "mock" + setImmediate: true // boolean | "mock" | "empty" + }, + recordsPath: path.resolve(__dirname, "build/records.json"), + recordsInputPath: path.resolve(__dirname, "build/records.json"), + recordsOutputPath: path.resolve(__dirname, "build/records.json"), + // TODO + ``` + +T> Want to rapidly generate webpack configuration file for your project requirements with few clicks away. + +[Generate Custom Webpack Configuration](https://generatewebpackconfig.netlify.com/) is an interactive portal you can play around by selecting custom webpack configuration options tailored for your frontend project. It automatically generates +a minimal webpack configuration based on your selection of loaders/plugins, etc. + +[Visual tool for creating webpack configs](https://webpack.jakoblind.no/) is an online configuration tool for creating webpack config where you can select any combination of features you need. It also generates a full example project based on your webpack configs. diff --git a/src/utilities/content-utils.js b/src/utilities/content-utils.js index 85925d0121e1..35451f58a41d 100644 --- a/src/utilities/content-utils.js +++ b/src/utilities/content-utils.js @@ -61,7 +61,7 @@ export const extractSections = tree => { * @return {array} - All markdown descendants of the given `tree` */ export const extractPages = tree => { - return flattenContent(tree).filter(item => item.extension === '.md'); + return flattenContent(tree).filter(item => item.extension === '.md' || item.extension === '.mdx'); }; /** diff --git a/webpack.common.js b/webpack.common.js index eac8cca9d6bf..9c91d3d6c7f8 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -27,7 +27,40 @@ module.exports = (env = {}) => ({ { loader: '@mdx-js/loader', options: { - mdPlugins: [require('./prism')] + mdPlugins: [ + require('remark-slug'), + require('remark-mermaid'), + require('remark-refractor'), + [ + require('remark-custom-blockquotes'), + { + mapping: { + 'T>': 'tip', + 'W>': 'warning', + '?>': 'todo' + } + } + ], + [ + require('@rigor789/remark-autolink-headings'), + { + behaviour: 'append' + } + ], + [ + require('remark-responsive-tables'), + { + classnames: { + title: 'title', + description: 'description', + content: 'content', + mobile: 'mobile', + desktop: 'desktop' + } + } + ], + require('./prism') + ] } } ] @@ -38,37 +71,37 @@ module.exports = (env = {}) => ({ loader: 'remark-loader', options: { plugins: [ - // require('remark-slug'), - // require('remark-mermaid'), - // require('remark-refractor'), - // [ - // require('remark-custom-blockquotes'), - // { - // mapping: { - // 'T>': 'tip', - // 'W>': 'warning', - // '?>': 'todo' - // } - // } - // ], - // [ - // require('@rigor789/remark-autolink-headings'), - // { - // behaviour: 'append' - // } - // ], - // [ - // require('remark-responsive-tables'), - // { - // classnames: { - // title: 'title', - // description: 'description', - // content: 'content', - // mobile: 'mobile', - // desktop: 'desktop' - // } - // } - // ] + require('remark-slug'), + require('remark-mermaid'), + require('remark-refractor'), + [ + require('remark-custom-blockquotes'), + { + mapping: { + 'T>': 'tip', + 'W>': 'warning', + '?>': 'todo' + } + } + ], + [ + require('@rigor789/remark-autolink-headings'), + { + behaviour: 'append' + } + ], + [ + require('remark-responsive-tables'), + { + classnames: { + title: 'title', + description: 'description', + content: 'content', + mobile: 'mobile', + desktop: 'desktop' + } + } + ] ] } } diff --git a/webpack.dev.js b/webpack.dev.js index 58c4af257798..0e006e7023c8 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -32,7 +32,7 @@ module.exports = env => merge(common(env), { new DirectoryTreePlugin({ dir: 'src/content', path: 'src/_content.json', - extensions: /\.md/, + extensions: /\.mdx?/, enhance, filter, sort From f994546d901fd6d44314dfd6f395b9b0372ce9c0 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Fri, 24 Aug 2018 16:09:19 +0200 Subject: [PATCH 08/20] Removed commented code --- jsLinks.js | 83 ------------------------------ prism.js | 148 ----------------------------------------------------- 2 files changed, 231 deletions(-) diff --git a/jsLinks.js b/jsLinks.js index dafa377a14df..9a6a7da41e3b 100644 --- a/jsLinks.js +++ b/jsLinks.js @@ -9,91 +9,8 @@ function jslinks(Prism) { pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/gi, greedy: true, inside: { - // punctuation: /()/, - // string: /()/, rest: Prism.languages.js } } }); } - - - // for (let index = 0; index < code.length; index++) { - // const element = code[index]; - // let detailStart; - // let detailEnd; - // let summaryStart; - // let summaryEnd; - - // if (element.type === 'element') { - // detailStart = getDetails(element) - // summaryStart = getSummary(element) - // detailEnd = getDetails(element, true) - // summaryEnd = getSummary(element, true) - - // // if(summaryStart && summaryEnd) { - // console.log(summaryStart, summaryEnd) - // // console.log({ detailStart, detailEnd, summaryStart, summaryEnd }) - // const between = findAllBetween(node, summaryStart, summaryEnd) - // console.log({ between }) - // // } - // } -// } - -// let commentSummary = code.findIndex(ele => { -// if (ele.children) { -// return ele.children[0].value.endsWith('
'); -// } -// }); - -// console.log(commentSummary); - -// for (let index = 0; index < code.length; index++) { -// const element = code[index]; - -// if (element.type === 'element') { -// if (isDetails(element)) { -// if(isSummary(code[index + 1])) { -// console.log(element) - -// element.tagName = 'details' -// element.children = [ -// { -// type: 'element', -// tagName: 'summary', -// children: getChildren(code, index) -// } -// ] -// } -// } -// if (isElement(element, 'details')) { -// if (isElement(code[index + 1], 'summary')) { -// console.log(inspect(element)) -// console.log(element) -// element.children = [ -// { -// type: 'element', -// tagName: 'details', -// properties: { -// className: 'myclassname' -// }, -// // children: [ -// // { -// // type: 'text', -// // value: refractor.highlight(code[index + 2], 'js') -// // } -// // ] -// } -// ]; -// } -// } -// } -// } - -// const text = code.filter(c => c.type === 'text').map(c => c.value) - -// const textCode = text.map(t => refractor.highlight(t, 'js')) - -// data.hChildren = code; - -// console.log(code); diff --git a/prism.js b/prism.js index 61e92fcaad2b..2ddf99001413 100644 --- a/prism.js +++ b/prism.js @@ -36,47 +36,10 @@ remark() } }); -// function isElement(tree, tag, closeTag = false) { -// const openTag = closeTag ? ''; - -// return open && tagMatch && close; -// } - -// function getDetails(tree, close = false) { -// const tag = close ? '
' : '
'; -// if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { -// return tree; -// } -// } - -// function getSummary(tree, close = false) { -// const tag = close ? '' : ''; -// if (tree.properties.className.includes('keyword') && tree.children[0].value === tag) { -// return tree; -// } -// } - -// function getChildren(tree, index) { -// return tree; -// } - -// function isElement(tree) { -// return tree.type === 'element'; -// } - -// function isKeyword(tree) { -// return tree.properties.className.includes('keyword'); -// } - function attacher({ include, exclude } = {}) { return transformer; function transformer(tree, file) { - // console.log(tree) visit(tree, 'code', visitor); function visitor(node) { @@ -99,121 +62,10 @@ function attacher({ include, exclude } = {}) { node.properties.componentname = node.children[1].value } }) - - - - - // console.log(JSON.stringify(data.hChildren, null, 2)); } catch (e) { throw e; } - // try { - // code = refractor.highlight(node.value, lang); - - // const newTree = { - // type: 'root', - // children: code - // }; - - // let detailsStart = code - // .filter(isElement) - // .filter(isKeyword) - // .filter(tr => { - // return tr.children[0].value === '
'; - // }); - - // let detailsEnd = code - // .filter(isElement) - // .filter(isKeyword) - // .filter(tr => { - // return tr.children[0].value === '
'; - // }); - - // let summaryStart = code - // .filter(isElement) - // .filter(isKeyword) - // .filter(tr => { - // return tr.children[0].value === ''; - // }); - - // let summaryEnd = code - // .filter(isElement) - // .filter(isKeyword) - // .filter(tr => { - // return tr.children[0].value === ''; - // }); - - // const summaryTrees = detailsStart.map((_, i) => { - // return findAllBetween(newTree, summaryStart[i], summaryEnd[i]); - // }); - - // const detailsTree = detailsStart.map((_, i) => { - // return findAllBetween(newTree, detailsStart[i], detailsEnd[i]); - // }); - - // const getIndexes = (tree) => { - // return tree.map((_, i) => { - // return newTree.children.indexOf(tree[i]) - // }) - // } - - // const detailsStartIndexes = getIndexes(detailsStart) - // const summaryStartIndexes = getIndexes(summaryStart) - // const summaryEndIndexes = getIndexes(summaryEnd) - // const detailsEndIndexes = getIndexes(detailsEnd) - - // // console.log(inspect(code)) - // console.log({ detailsStartIndexes, summaryStartIndexes, summaryEndIndexes, detailsEndIndexes }) - - // let prevCount = 0; - - // detailsStart.forEach((_, i) => { - // prevCount += !detailsTree[i - 1] ? 0 : detailsTree[i - 1].length + 1; - // newTree.children.splice(detailsStartIndexes[i] - prevCount + i, detailsTree[i].length + 1, ...[{ type: 'text', value: `${detailsStartIndexes[i]}` }]) - // }); - - // const cleanDetailsTrees = detailsStart.map((_, i) => { - // return detailsTree[i].splice(summaryTrees[i].length + 3) - // }) - - // const newDetailsTrees = detailsStart.map((_, i) => { - // return { - // type: 'element', - // tagName: 'details', - // properties: { - // open: false - // }, - // children: [ - // { - // type: 'element', - // tagName: 'summary', - // children: summaryTrees[i].splice(1) - // }, - // ...cleanDetailsTrees[i] - // ] - // } - // }) - - // // console.log(util.inspect(newTree.children.map((e, i) => ({ [i]: e})), { depth: 4, maxArrayLength: 300 })) - - // detailsStart.forEach((_, i) => { - // let insertPosition = newTree.children.findIndex(d => parseInt(d.value, 10) === detailsStartIndexes[i]) - - // newTree.children.splice(insertPosition, 1) - // newTree.children.splice(insertPosition, 0, newDetailsTrees[i]) - // }) - - // // console.log(util.inspect(newTree.children.map((e, i) => ({ [i]: e})), { depth: 4, maxArrayLength: 300 })) - - // // console.log(newTree.children) - - // data.hChildren = newTree.children; - // } catch (e) { - // console.log(e); - // throw e; - // } - data.hProperties = data.hProperties || {}; data.hProperties.className = ['hljs', ...(data.hProperties.className || []), `language-${lang}`]; } From 2de395d47bc21fef94d8064c599ee3823db366fc Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Fri, 24 Aug 2018 16:16:10 +0200 Subject: [PATCH 09/20] Reestructure --- .../Configuration/Configuration.jsx | 51 ++++++++++++++++++ .../Configuration/components.js} | 1 - src/components/Page/Page.jsx | 52 +------------------ 3 files changed, 53 insertions(+), 51 deletions(-) create mode 100644 src/components/Configuration/Configuration.jsx rename src/{content/configuration/modes.js => components/Configuration/components.js} (82%) diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx new file mode 100644 index 000000000000..afcb9be4ee8c --- /dev/null +++ b/src/components/Configuration/Configuration.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Modes, Entry } from './components'; + +const components = { + mode: props => , + entry: props => , + filename: props => , + publicPath: props => , + advancedOutput: props => , + expert: props => , + advancedModule: props => , + alias: props => , + advancedResolve: props => , + hints: props => , + devtool: props => , + target: props => , + externals: props => , + stats: props => , + advanced: props => , + libraryTarget: props => +}; + +const Pre = props => { + const newChildren = React.Children.map(props.children.props.children, (child, i) => { + if (React.isValidElement(child)) { + if (child.props.props.className.includes('keyword')) { + return components[child.props.props.componentname]( + child.props.children.slice(3, React.Children.count(child.props.children) - 4) + ); + } + } + + return child; + }); + + const newProps = { + children: newChildren + }; + + return ( + 
+      
+
+ ); +}; + +export default { + components: { + pre: Pre + } +}; diff --git a/src/content/configuration/modes.js b/src/components/Configuration/components.js similarity index 82% rename from src/content/configuration/modes.js rename to src/components/Configuration/components.js index 952dd744e449..65a3e3daaade 100644 --- a/src/content/configuration/modes.js +++ b/src/components/Configuration/components.js @@ -1,5 +1,4 @@ import React from 'react'; -import Dropdown from 'react-dropdown'; export const Modes = props => { return {props.children}; diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx index 2ac2d0fc562d..2bb7014aaf11 100644 --- a/src/components/Page/Page.jsx +++ b/src/components/Page/Page.jsx @@ -6,54 +6,11 @@ import PageLinks from '../PageLinks/PageLinks'; import Markdown from '../Markdown/Markdown'; import Contributors from '../Contributors/Contributors'; import Placeholder from '../Placeholder/Placeholder'; -import { Modes, Entry } from '../../content/configuration/modes.js'; +import Configuration from '../Configuration/Configuration'; // Load Styling import './Page.scss'; -const components = { - mode: props => , - entry: props => , - filename: props => , - publicPath: props => , - advancedOutput: props => , - expert: props => , - advancedModule: props => , - alias: props => , - advancedResolve: props => , - hints: props => , - devtool: props => , - target: props => , - externals: props => , - stats: props => , - advanced: props => , - libraryTarget: props => -}; - -const Pre = props => { - const newChildren = React.Children.map(props.children.props.children, (child, i) => { - if (React.isValidElement(child)) { - if (child.props.props.className.includes('keyword')) { - return components[child.props.props.componentname]( - child.props.children.slice(3, React.Children.count(child.props.children) - 4) - ); - } - } - - return child; - }); - - const newProps = { - children: newChildren - }; - - return ( - 
-      
-
- ); -}; - class Page extends React.Component { constructor(props) { super(props); @@ -98,12 +55,7 @@ class Page extends React.Component { let contentRender; if (typeof content === 'function') { - contentRender = content({ - components: { - pre: Pre, - hr: (props) => null - } - }); + contentRender = content(Configuration); } else { contentRender = (
Date: Fri, 24 Aug 2018 19:26:00 +0200 Subject: [PATCH 10/20] It is all React --- jsLinks.js | 16 +- prism.js | 4 +- .../Configuration/Configuration.jsx | 69 ++- src/components/Configuration/components.js | 16 +- src/content/configuration/index.mdx | 416 ++++++++++-------- 5 files changed, 306 insertions(+), 215 deletions(-) diff --git a/jsLinks.js b/jsLinks.js index 9a6a7da41e3b..efb5c5b1325f 100644 --- a/jsLinks.js +++ b/jsLinks.js @@ -1,14 +1,24 @@ module.exports = jslinks; -jslinks.displayName = "jslinks"; +jslinks.displayName = 'jslinks'; jslinks.aliases = []; function jslinks(Prism) { - Prism.languages["js-with-links-with-details"] = Prism.languages.extend("javascript", { + Prism.languages['js-with-links-with-details'] = Prism.languages.extend('javascript', { keyword: { - pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/gi, + // pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/gi, // + // pattern: /<[a-z]+ url=\"([^\"]+)\">(.|\n)*?<\/[a-z]+>/gi, + // pattern: /<([a-z]+ \"([^\"]+)\")>(.|\n)*?<\/[a-z]+>/gi, // + pattern: /<([a-z]+) \"([^\"]+)\">(.|\n?)*<\/\1>/gi, // with backrefence greedy: true, inside: { + tag: { + pattern: /(|<\/default>)/, + greedy: true, + inside: { + rest: Prism.languages.js + } + }, rest: Prism.languages.js } } diff --git a/prism.js b/prism.js index 2ddf99001413..8b1d38adcef9 100644 --- a/prism.js +++ b/prism.js @@ -59,9 +59,11 @@ function attacher({ include, exclude } = {}) { data.hChildren = refractor.highlight(node.value, lang); data.hChildren.forEach(node => { if(node.properties && node.properties.className.includes('keyword')) { - node.properties.componentname = node.children[1].value + node.properties.componentname = node.children[1].value.trim() + node.properties.url = node.children[2].children[0].value.replace(/"/g, '') } }) + } catch (e) { throw e; } diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index afcb9be4ee8c..45615028055f 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -2,30 +2,65 @@ import React from 'react'; import { Modes, Entry } from './components'; const components = { - mode: props => , - entry: props => , - filename: props => , - publicPath: props => , - advancedOutput: props => , - expert: props => , - advancedModule: props => , - alias: props => , - advancedResolve: props => , - hints: props => , - devtool: props => , - target: props => , - externals: props => , - stats: props => , - advanced: props => , - libraryTarget: props => + mode: (children, props) => { + return ; + }, + entry: (children, props) => { + return ; + }, + filename: (children, props) => { + return ; + }, + publicPath: (children, props) => { + return ; + }, + advancedOutput: (children, props) => { + return ; + }, + expert: (children, props) => { + return ; + }, + advancedModule: (children, props) => { + return ; + }, + alias: (children, props) => { + return ; + }, + advancedResolve: (children, props) => { + return ; + }, + hints: (children, props) => { + return ; + }, + devtool: (children, props) => { + return ; + }, + target: (children, props) => { + return ; + }, + externals: (children, props) => { + return ; + }, + stats: (children, props) => { + return ; + }, + advanced: (children, props) => { + return ; + }, + libraryTarget: (children, props) => { + return ; + } }; const Pre = props => { const newChildren = React.Children.map(props.children.props.children, (child, i) => { if (React.isValidElement(child)) { if (child.props.props.className.includes('keyword')) { + if (!components[child.props.props.componentname]) return child; + return components[child.props.props.componentname]( - child.props.children.slice(3, React.Children.count(child.props.children) - 4) + child.props.children.slice(4, React.Children.count(child.props.children) - 4), + { url: child.props.props.url } ); } } diff --git a/src/components/Configuration/components.js b/src/components/Configuration/components.js index 65a3e3daaade..0dba6d046062 100644 --- a/src/components/Configuration/components.js +++ b/src/components/Configuration/components.js @@ -1,7 +1,19 @@ import React from 'react'; -export const Modes = props => { - return {props.children}; +export const Modes = ({ children, url }) => { + const closeDefault = children.findIndex(child => { + if (React.isValidElement(child)) { + return child.props.props.className.includes('tag') && child.props.children.length === 4; + } + }); + + const removeSpaces = child => (typeof child === 'string' && child !== ' ' ? child.trim() : child); + + const newChildren = children.splice(2, closeDefault - 3).map(removeSpaces); + + children.splice(0, 4); // Remove + + return {newChildren}; }; export const Entry = props => { diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx index 607785b6ba5d..b669ea843552 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -49,20 +49,24 @@ __webpack.config.js__ const path = require('path'); module.exports = { - - mode: "production", // "production" | "development" | "none" + + + mode: "production", // "production" | "development" | "none" + mode: "production", // enable many optimizations for production builds mode: "development", // enabled useful tools for development mode: "none", // no defaults // Chosen mode tells webpack to use its built-in optimizations accordingly. - - entry: "./app/entry", // string | object | array - entry: ["./app/entry1", "./app/entry2"], - entry: { - a: "./app/entry-a", - b: ["./app/entry-b1", "./app/entry-b2"] - }, + + + entry: "./app/entry", // string | object | array + + entry: ["./app/entry1", "./app/entry2"], + entry: { + a: "./app/entry-a", + b: ["./app/entry-b1", "./app/entry-b2"] + }, // defaults to ./src // Here the application starts executing @@ -72,22 +76,28 @@ module.exports = { path: path.resolve(__dirname, "dist"), // string // the target directory for all output files // must be an absolute path (use the Node.js path module) - - filename: "bundle.js", // string + + + filename: "bundle.js", // string + filename: "[name].js", // for multiple entry points filename: "[chunkhash].js", // for long term caching // the filename template for entry chunks - - publicPath: "/assets/", // string + + + publicPath: "/assets/", // string + publicPath: "", publicPath: "https://cdn.example.com/", // the url to the output directory resolved relative to the HTML page library: "MyLibrary", // string, // the name of the exported library - - libraryTarget: "umd", // universal module definition + + + libraryTarget: "umd", // universal module definition + libraryTarget: "umd2", // universal module definition libraryTarget: "commonjs2", // exported with module.exports libraryTarget: "commonjs", // exported as properties to exports @@ -100,41 +110,45 @@ module.exports = { libraryTarget: "jsonp", // jsonp wrapper // the type of the exported library - - /* Advanced output configuration (click to show) */ - pathinfo: true, // boolean - // include useful path info about modules, exports, requests, etc. into the generated cod - chunkFilename: "[id].js", - chunkFilename: "[chunkhash].js", // for long term caching - // the filename template for additional chunks - jsonpFunction: "myWebpackJsonp", // string - // name of the JSONP function used to load chunks - sourceMapFilename: "[file].map", // string - sourceMapFilename: "sourcemaps/[file].map", // string - // the filename template of the source map location - devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string - // the name template for modules in a devtool - devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string - // the name template for modules in a devtool (used for conflicts) - umdNamedDefine: true, // boolean - // use a named AMD module in UMD library - crossOriginLoading: "use-credentials", // enum - crossOriginLoading: "anonymous", - crossOriginLoading: false, - // specifies how cross origin request are issued by the runtime + + + /* Advanced output configuration (click to show) */ + + pathinfo: true, // boolean + // include useful path info about modules, exports, requests, etc. into the generated cod + chunkFilename: "[id].js", + chunkFilename: "[chunkhash].js", // for long term caching + // the filename template for additional chunks + jsonpFunction: "myWebpackJsonp", // string + // name of the JSONP function used to load chunks + sourceMapFilename: "[file].map", // string + sourceMapFilename: "sourcemaps/[file].map", // string + // the filename template of the source map location + devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string + // the name template for modules in a devtool + devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string + // the name template for modules in a devtool (used for conflicts) + umdNamedDefine: true, // boolean + // use a named AMD module in UMD library + crossOriginLoading: "use-credentials", // enum + crossOriginLoading: "anonymous", + crossOriginLoading: false, + // specifies how cross origin request are issued by the runtime - - /* Expert output configuration (on own risk) */ - devtoolLineToLine: { - test: /\.jsx$/ - }, - // use a simple 1:1 mapped SourceMaps for these modules (faster) - hotUpdateMainFilename: "[hash].hot-update.json", // string - // filename template for HMR manifest - hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string - // filename template for HMR chunks - sourcePrefix: "\t", // string - // prefix module sources in bundle for better readablitity + + + /* Expert output configuration (on own risk) */ + + devtoolLineToLine: { + test: /\.jsx$/ + }, + // use a simple 1:1 mapped SourceMaps for these modules (faster) + hotUpdateMainFilename: "[hash].hot-update.json", // string + // filename template for HMR manifest + hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string + // filename template for HMR chunks + sourcePrefix: "\t", // string + // prefix module sources in bundle for better readablitity }, module: { @@ -195,24 +209,26 @@ module.exports = { { resource: { not: /* condition */ } } // matches if the condition is not matched ], - - /* Advanced module configuration (click to show) */ - noParse: [ - /special-library\.js$/ - ], - // do not parse this module - unknownContextRequest: ".", - unknownContextRecursive: true, - unknownContextRegExp: /^\.\/.*$/, - unknownContextCritical: true, - exprContextRequest: ".", - exprContextRegExp: /^\.\/.*$/, - exprContextRecursive: true, - exprContextCritical: true, - wrappedContextRegExp: /.*/, - wrappedContextRecursive: true, - wrappedContextCritical: false, - // specifies default behavior for dynamic requests + + + /* Advanced module configuration (click to show) */ + + noParse: [ + /special-library\.js$/ + ], + // do not parse this module + unknownContextRequest: ".", + unknownContextRecursive: true, + unknownContextRegExp: /^\.\/.*$/, + unknownContextCritical: true, + exprContextRequest: ".", + exprContextRegExp: /^\.\/.*$/, + exprContextRecursive: true, + exprContextCritical: true, + wrappedContextRegExp: /.*/, + wrappedContextRecursive: true, + wrappedContextCritical: false, + // specifies default behavior for dynamic requests }, resolve: { @@ -235,56 +251,62 @@ module.exports = { // alias "module" -> "./app/third/module.js" and "module/file" results in error // modules aliases are imported relative to the current context }, - - /* alternative alias syntax (click to show) */ - alias: [ - { - name: "module", - // the old request - alias: "new-module", - // the new request - onlyModule: true - // if true only "module" is aliased - // if false "module/inner/path" is also aliased - } - ], + + + /* Alternative alias syntax (click to show) */ + + alias: [ + { + name: "module", + // the old request + alias: "new-module", + // the new request + onlyModule: true + // if true only "module" is aliased + // if false "module/inner/path" is also aliased + } + ], - - /* Advanced resolve configuration (click to show) */ - symlinks: true, - // follow symlinks to new location - descriptionFiles: ["package.json"], - // files that are read for package description - mainFields: ["main"], - // properties that are read from description file - // when a folder is requested - aliasFields: ["browser"], - // properites that are read from description file - // to alias requests in this package - enforceExtension: false, - // if true request must not include an extensions - // if false request may already include an extension - moduleExtensions: ["-module"], - enforceModuleExtension: false, - // like extensions/enforceExtension but for module names instead of files - unsafeCache: true, - unsafeCache: {}, - // enables caching for resolved requests - // this is unsafe as folder structure may change - // but performance improvement is really big - cachePredicate: (path, request) => true, - // predicate function which selects requests for caching - plugins: [ - // ... - ] - // additional plugins applied to the resolver + + + /* Advanced resolve configuration (click to show) */ + + symlinks: true, + // follow symlinks to new location + descriptionFiles: ["package.json"], + // files that are read for package description + mainFields: ["main"], + // properties that are read from description file + // when a folder is requested + aliasFields: ["browser"], + // properites that are read from description file + // to alias requests in this package + enforceExtension: false, + // if true request must not include an extensions + // if false request may already include an extension + moduleExtensions: ["-module"], + enforceModuleExtension: false, + // like extensions/enforceExtension but for module names instead of files + unsafeCache: true, + unsafeCache: {}, + // enables caching for resolved requests + // this is unsafe as folder structure may change + // but performance improvement is really big + cachePredicate: (path, request) => true, + // predicate function which selects requests for caching + plugins: [ + // ... + ] + // additional plugins applied to the resolver }, performance: { - - hints: "warning", // enum - hints: "error", // emit errors for perf hints - hints: false, // turn off perf hints + + + hints: "warning", // enum + + hints: "error", // emit errors for perf hints + hints: false, // turn off perf hints maxAssetSize: 200000, // int (in bytes), maxEntrypointSize: 400000, // int (in bytes) @@ -293,14 +315,16 @@ module.exports = { return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); } }, - - devtool: "source-map", // enum - devtool: "inline-source-map", // inlines SourceMap into original file - devtool: "eval-source-map", // inlines SourceMap per module - devtool: "hidden-source-map", // SourceMap without reference in original file - devtool: "cheap-source-map", // cheap-variant of SourceMap without module mappings - devtool: "cheap-module-source-map", // cheap-variant of SourceMap with module mappings - devtool: "eval", // no SourceMap, but named modules. Fastest at the expense of detail. + + + devtool: "source-map", // enum + + devtool: "inline-source-map", // inlines SourceMap into original file + devtool: "eval-source-map", // inlines SourceMap per module + devtool: "hidden-source-map", // SourceMap without reference in original file + devtool: "cheap-source-map", // cheap-variant of SourceMap without module mappings + devtool: "cheap-module-source-map", // cheap-variant of SourceMap with module mappings + devtool: "eval", // no SourceMap, but named modules. Fastest at the expense of detail. // enhance debugging by adding meta info for the browser devtools // source-map most detailed at the expense of build speed. @@ -308,32 +332,36 @@ module.exports = { // the home directory for webpack // the entry and module.rules.loader option // is resolved relative to this directory - - target: "web", // enum - target: "webworker", // WebWorker - target: "node", // Node.js via require - target: "async-node", // Node.js via fs and vm - target: "node-webkit", // nw.js - target: "electron-main", // electron, main process - target: "electron-renderer", // electron, renderer process - target: (compiler) => { /* ... */ }, // custom + + + target: "web", // enum + + target: "webworker", // WebWorker + target: "node", // Node.js via require + target: "async-node", // Node.js via fs and vm + target: "node-webkit", // nw.js + target: "electron-main", // electron, main process + target: "electron-renderer", // electron, renderer process + target: (compiler) => { /* ... */ }, // custom // the environment in which the bundle should run // changes chunk loading behavior and available modules - - externals: ["react", /^@angular/], - externals: "react", // string (exact match) - externals: /^[a-z\-]+($|\/)/, // Regex - externals: { // object - angular: "this angular", // this["angular"] - react: { // UMD - commonjs: "react", - commonjs2: "react", - amd: "react", - root: "React" - } - }, - externals: (request) => { /* ... */ return "commonjs " + request } + + + externals: ["react", /^@angular/], + + externals: "react", // string (exact match) + externals: /^[a-z\-]+($|\/)/, // Regex + externals: { // object + angular: "this angular", // this["angular"] + react: { // UMD + commonjs: "react", + commonjs2: "react", + amd: "react", + root: "React" + } + }, + externals: (request) => { /* ... */ return "commonjs " + request } // Don't follow/bundle these modules, but request them at runtime from the environment serve: { //object @@ -342,16 +370,18 @@ module.exports = { // ... }, // lets you provide options for webpack-serve - - stats: "errors-only", - stats: { //object - assets: true, - colors: true, - errors: true, - errorDetails: true, - hash: true, - // ... - }, + + + stats: "errors-only", + + stats: { //object + assets: true, + colors: true, + errors: true, + errorDetails: true, + hash: true, + // ... + }, // lets you precisely control what bundle information gets displayed devServer: { @@ -370,44 +400,46 @@ module.exports = { // ... ], // list of additional plugins - - /* Advanced configuration (click to show) */ - resolveLoader: { /* same as resolve */ } - // separate resolve options for loaders - parallelism: 1, // number - // limit the number of parallel processed modules - profile: true, // boolean - // capture timing information - bail: true, //boolean - // fail out on the first error instead of tolerating it. - cache: false, // boolean - // disable/enable caching - watch: true, // boolean - // enables watching - watchOptions: { - aggregateTimeout: 1000, // in ms - // aggregates multiple changes to a single rebuild - poll: true, - poll: 500, // intervall in ms - // enables polling mode for watching - // must be used on filesystems that doesn't notify on change - // i. e. nfs shares - }, - node: { - // Polyfills and mocks to run Node.js- - // environment code in non-Node environments. - console: false, // boolean | "mock" - global: true, // boolean | "mock" - process: true, // boolean - __filename: "mock", // boolean | "mock" - __dirname: "mock", // boolean | "mock" - Buffer: true, // boolean | "mock" - setImmediate: true // boolean | "mock" | "empty" - }, - recordsPath: path.resolve(__dirname, "build/records.json"), - recordsInputPath: path.resolve(__dirname, "build/records.json"), - recordsOutputPath: path.resolve(__dirname, "build/records.json"), - // TODO + + + /* Advanced configuration (click to show) */ + + resolveLoader: { /* same as resolve */ } + // separate resolve options for loaders + parallelism: 1, // number + // limit the number of parallel processed modules + profile: true, // boolean + // capture timing information + bail: true, //boolean + // fail out on the first error instead of tolerating it. + cache: false, // boolean + // disable/enable caching + watch: true, // boolean + // enables watching + watchOptions: { + aggregateTimeout: 1000, // in ms + // aggregates multiple changes to a single rebuild + poll: true, + poll: 500, // intervall in ms + // enables polling mode for watching + // must be used on filesystems that doesn't notify on change + // i. e. nfs shares + }, + node: { + // Polyfills and mocks to run Node.js- + // environment code in non-Node environments. + console: false, // boolean | "mock" + global: true, // boolean | "mock" + process: true, // boolean + __filename: "mock", // boolean | "mock" + __dirname: "mock", // boolean | "mock" + Buffer: true, // boolean | "mock" + setImmediate: true // boolean | "mock" | "empty" + }, + recordsPath: path.resolve(__dirname, "build/records.json"), + recordsInputPath: path.resolve(__dirname, "build/records.json"), + recordsOutputPath: path.resolve(__dirname, "build/records.json"), + // TODO ``` From faa80c40aee752ffc27d9958bc972ea012ff2fa8 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Sat, 25 Aug 2018 15:55:20 +0200 Subject: [PATCH 11/20] Cute cards --- package.json | 2 +- .../Configuration/Configuration.jsx | 3 + .../Configuration/Configuration.scss | 10 +++ src/components/Configuration/components.js | 82 +++++++++++++++--- src/content/configuration/index.mdx | 6 +- yarn.lock | 84 ++++++++++++++++--- 6 files changed, 164 insertions(+), 23 deletions(-) create mode 100644 src/components/Configuration/Configuration.scss diff --git a/package.json b/package.json index fcb95158a653..1cd4cbf76303 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,6 @@ "node-sass": "^4.5.3", "npm-run-all": "^4.1.1", "postcss-loader": "^2.0.6", - "react-dropdown": "1.6.2", "redirect-webpack-plugin": "^0.1.1", "remark": "^9.0.0", "remark-autolink-headings": "^5.0.0", @@ -142,6 +141,7 @@ "react-g-analytics": "0.4.2", "react-hot-loader": "^4.0.0-beta.12", "react-router-dom": "^4.2.2", + "react-tiny-popover": "3.4.2", "webpack.vote": "^0.1.2", "whatwg-fetch": "^2.0.3" } diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index 45615028055f..9c318e8fa79f 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -2,6 +2,9 @@ import React from 'react'; import { Modes, Entry } from './components'; const components = { + link: (children, props) => { + return ; + }, mode: (children, props) => { return ; }, diff --git a/src/components/Configuration/Configuration.scss b/src/components/Configuration/Configuration.scss new file mode 100644 index 000000000000..42a056dd1af2 --- /dev/null +++ b/src/components/Configuration/Configuration.scss @@ -0,0 +1,10 @@ +.shadow { + overflow: visible; + border-radius: 4px; + box-shadow: -1px 1px 10px 0 rgba(255, 255, 255, 0.44); +} + +.inline { + padding-right: 15px !important; + margin: 0 !important; +} diff --git a/src/components/Configuration/components.js b/src/components/Configuration/components.js index 0dba6d046062..502941c8ea74 100644 --- a/src/components/Configuration/components.js +++ b/src/components/Configuration/components.js @@ -1,21 +1,81 @@ import React from 'react'; +import Popover from 'react-tiny-popover'; +import './Configuration.scss'; -export const Modes = ({ children, url }) => { - const closeDefault = children.findIndex(child => { - if (React.isValidElement(child)) { - return child.props.props.className.includes('tag') && child.props.children.length === 4; - } - }); +const isFirstChild = child => typeof child === 'string' && child !== ' '; - const removeSpaces = child => (typeof child === 'string' && child !== ' ' ? child.trim() : child); +const removeSpaces = child => (isFirstChild(child) ? child.trim() : child); - const newChildren = children.splice(2, closeDefault - 3).map(removeSpaces); - - children.splice(0, 4); // Remove +const addLink = (child, i, url) => { + return isFirstChild(child) ? ( + + {child} + + ) : ( + child + ); +}; - return {newChildren}; +const Card = ({ body }) => { + return ( +
+ 
+        {body}
+
+
+ ); }; +export class Modes extends React.Component { + constructor(props) { + super(props); + this.state = { + open: false, + summary: null, + content: null + }; + } + + componentDidMount() { + const { children, url } = this.props; + + const closeDefault = children.findIndex(child => { + if (React.isValidElement(child)) { + return child.props.props.className.includes('tag') && child.props.children.length === 4; + } + }); + + const newChildren = children + .splice(2, closeDefault - 3) + .map(removeSpaces) + .map((child, i) => addLink(child, i, url)); + + children.splice(0, 4); // Remove + + this.setState({ + summary: newChildren, + content: children + }); + } + + render() { + const { open, summary, content } = this.state; + return ( + this.setState({ open: false })} + containerClassName={'shadow'} + content={} + > + this.setState({ open: !this.state.open })}>{summary} + + ); + } +} + export const Entry = props => { return {props.children}; }; diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx index b669ea843552..8f07015e1af2 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -71,7 +71,11 @@ module.exports = { // defaults to ./src // Here the application starts executing // and webpack starts bundling - output: { + + + output: { + + // options related to how webpack emits results path: path.resolve(__dirname, "dist"), // string // the target directory for all output files diff --git a/yarn.lock b/yarn.lock index 864268058c89..26a8c66b1f49 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1583,10 +1583,6 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.3: - version "2.2.6" - resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" - clean-css@4.1.x: version "4.1.11" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a" @@ -5147,6 +5143,10 @@ lodash.intersection@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.intersection/-/lodash.intersection-4.4.0.tgz#0a11ba631d0e95c23c7f2f4cbb9a692ed178e705" +lodash.iteratee@^4.5.0: + version "4.7.0" + resolved "https://registry.yarnpkg.com/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz#be4177db289a8ccc3c0990f1db26b5b22fc1554c" + lodash.map@^4.4.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3" @@ -5222,6 +5222,10 @@ loglevel@^1.4.1: version "1.6.1" resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa" +longest-streak@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-1.0.0.tgz#d06597c4d4c31b52ccb1f5d8f8fe7148eafd6965" + longest-streak@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e" @@ -5310,6 +5314,10 @@ markdown-it@8.4.1: mdurl "^1.0.1" uc.micro "^1.0.5" +markdown-table@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-0.4.0.tgz#890c2c1b3bfe83fb00e4129b8e4cfe645270f9d1" + markdown-table@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786" @@ -7027,12 +7035,6 @@ react-dom@^16.2.0: object-assign "^4.1.1" prop-types "^15.6.0" -react-dropdown@1.6.2: - version "1.6.2" - resolved "https://registry.yarnpkg.com/react-dropdown/-/react-dropdown-1.6.2.tgz#13ace229f1749f942cd0ec7eb221cb1a22788db7" - dependencies: - classnames "^2.2.3" - react-g-analytics@0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/react-g-analytics/-/react-g-analytics-0.4.2.tgz#8e0b02d595cf5011dbffd2f697437bebed0972aa" @@ -7102,6 +7104,10 @@ react-textarea-autosize@^5.2.1: dependencies: prop-types "^15.6.0" +react-tiny-popover@3.4.2: + version "3.4.2" + resolved "https://registry.yarnpkg.com/react-tiny-popover/-/react-tiny-popover-3.4.2.tgz#ceee5662a3af64d4a9c3d46a28d71bb6f21738ee" + react@^0.14.7: version "0.14.9" resolved "https://registry.yarnpkg.com/react/-/react-0.14.9.tgz#9110a6497c49d44ba1c0edd317aec29c2e0d91d1" @@ -7418,6 +7424,20 @@ remark-message-control@^4.0.0: unified-message-control "^1.0.0" xtend "^4.0.1" +remark-parse@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-1.1.0.tgz#c3ca10f9a8da04615c28f09aa4e304510526ec21" + dependencies: + collapse-white-space "^1.0.0" + extend "^3.0.0" + parse-entities "^1.0.2" + repeat-string "^1.5.4" + trim "0.0.1" + trim-trailing-lines "^1.0.0" + unherit "^1.0.4" + unist-util-remove-position "^1.0.0" + vfile-location "^2.0.0" + remark-parse@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-3.0.1.tgz#1b9f841a44d8f4fbf2246850265459a4eb354c80" @@ -7522,6 +7542,19 @@ remark-squeeze-paragraphs@^3.0.1: dependencies: mdast-squeeze-paragraphs "^3.0.0" +remark-stringify@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-1.1.0.tgz#a7105e25b9ee2bf9a49b75d2c423f11b06ae2092" + dependencies: + ccount "^1.0.0" + extend "^3.0.0" + longest-streak "^1.0.0" + markdown-table "^0.4.0" + parse-entities "^1.0.2" + repeat-string "^1.5.4" + stringify-entities "^1.0.1" + unherit "^1.0.4" + remark-stringify@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-4.0.0.tgz#4431884c0418f112da44991b4e356cfe37facd87" @@ -7560,6 +7593,14 @@ remark-stringify@^5.0.0: unherit "^1.0.4" xtend "^4.0.1" +remark@^5.0.1: + version "5.1.0" + resolved "https://registry.yarnpkg.com/remark/-/remark-5.1.0.tgz#cb463bd3dbcb4b99794935eee1cf71d7a8e3068c" + dependencies: + remark-parse "^1.1.0" + remark-stringify "^1.1.0" + unified "^4.1.1" + remark@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/remark/-/remark-8.0.0.tgz#287b6df2fe1190e263c1d15e486d3fa835594d6d" @@ -9019,6 +9060,17 @@ unified-message-control@^1.0.0: unist-util-visit "^1.0.0" vfile-location "^2.0.0" +unified@^4.1.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/unified/-/unified-4.2.1.tgz#76ff43aa8da430f6e7e4a55c84ebac2ad2cfcd2e" + dependencies: + bail "^1.0.0" + extend "^3.0.0" + has "^1.0.1" + once "^1.3.3" + trough "^1.0.0" + vfile "^1.0.0" + unified@^6.0.0, unified@^6.1.0, unified@^6.1.2, unified@^6.1.6: version "6.2.0" resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba" @@ -9083,6 +9135,14 @@ unist-util-find-all-between@1.0.1: dependencies: unist-util-is "^2.0.0" +unist-util-find@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/unist-util-find/-/unist-util-find-1.0.1.tgz#1062bbb6928c7a97c6adc89b53745d4c46c222a2" + dependencies: + lodash.iteratee "^4.5.0" + remark "^5.0.1" + unist-util-visit "^1.1.0" + unist-util-generated@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.2.tgz#8b993f9239d8e560be6ee6e91c3f7b7208e5ce25" @@ -9366,6 +9426,10 @@ vfile-statistics@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/vfile-statistics/-/vfile-statistics-1.1.1.tgz#a22fd4eb844c9eaddd781ad3b3246db88375e2e3" +vfile@^1.0.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/vfile/-/vfile-1.4.0.tgz#c0fd6fa484f8debdb771f68c31ed75d88da97fe7" + vfile@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a" From 7423ed1eded7952188bef80305ffa6db56127273 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Mon, 3 Sep 2018 15:08:59 +0200 Subject: [PATCH 12/20] chore(config) Remove files --- index.html | 24 ------------------------ source.md | 27 --------------------------- 2 files changed, 51 deletions(-) delete mode 100644 index.html delete mode 100644 source.md diff --git a/index.html b/index.html deleted file mode 100644 index afec01c3e2da..000000000000 --- a/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - 
const path = require('path');
-
-module.exports = {
-  [output](/configuration/

-          /* Expertoutputconfiguration(onownrisk) */
-        
-        // prefixmodulesourcesinbundleforbetterreadablitity
-      </details>
-    

-  }

-        /* Advancedoutputconfiguration(clicktoshow) */
-      
-      // specifieshowcrossoriginrequestareissuedbytheruntime
-      <details>
-        <summary>
-          /* Expertoutputconfiguration(onownrisk) */
-        </summary>
-        // prefixmodulesourcesinbundleforbetterreadablitity
-      

-        // summaryuniversalmoduledefinition
-      
-      // universalmoduledefinition
-
diff --git a/source.md b/source.md deleted file mode 100644 index 6361707721c3..000000000000 --- a/source.md +++ /dev/null @@ -1,27 +0,0 @@ -```js-with-links-with-details -const path = require('path'); - -module.exports = { - [output](/configuration/output): { -
- - // summaryuniversalmoduledefinition - - // universalmoduledefinition -
- // thetypeoftheexportedlibrary -
- - /* Advancedoutputconfiguration(clicktoshow) */ - - // specifieshowcrossoriginrequestareissuedbytheruntime -
- - /* Expertoutputconfiguration(onownrisk) */ - - // prefixmodulesourcesinbundleforbetterreadablitity -
-
- } -} -``` From 0489210a5e11cf1be7785e37dd59a40c7edcd343 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Sat, 15 Dec 2018 21:56:07 +0100 Subject: [PATCH 13/20] Remove frontmatter information --- package.json | 20 +++++----- src/components/Page/Page.jsx | 20 +++++----- yarn.lock | 75 ++++++++++++++++++------------------ 3 files changed, 57 insertions(+), 58 deletions(-) diff --git a/package.json b/package.json index 066a26776172..18d4c9bebab4 100644 --- a/package.json +++ b/package.json @@ -57,8 +57,8 @@ ] }, "devDependencies": { - "@mdx-js/loader": "0.15.0", - "@mdx-js/mdx": "0.15.0", + "@mdx-js/loader": "0.15.7", + "@mdx-js/mdx": "0.15.7", "@octokit/rest": "^15.9.4", "alex": "^5.1.0", "autoprefixer": "^7.2.3", @@ -73,8 +73,8 @@ "copy-webpack-plugin": "4.5.2", "cross-env": "5.2.0", "css-loader": "^0.28.5", - "directory-tree": "2.1.0", - "directory-tree-webpack-plugin": "^0.3.1", + "directory-tree": "2.2.0", + "directory-tree-webpack-plugin": "0.3", "duplexer": "^0.1.1", "eslint": "4.19.1", "eslint-loader": "^2.0.0", @@ -89,14 +89,14 @@ "http-server": "^0.10.0", "husky": "^1.0.0-rc.8", "hyperlink": "^4.0.0", - "lint-staged": "^7.2.0", + "lint-staged": "^8.1.0", "loader-utils": "^1.1.0", "lodash": "^4.17.4", - "markdown-loader": "^2.0.1", + "markdown-loader": "^4.0.0", "markdownlint": "^0.11.0", "markdownlint-cli": "^0.13.0", "markdownlint-rule-emphasis-style": "^1.0.0", - "marked": "^0.3.7", + "marked": "^0.5.2", "mermaid.cli": "^0.3.6", "minimist": "1.2.0", "mkdirp": "^0.5.1", @@ -105,7 +105,7 @@ "npm-run-all": "^4.1.1", "postcss-loader": "^2.0.6", "redirect-webpack-plugin": "^0.1.1", - "remark": "^9.0.0", + "remark": "^10.0.1", "remark-autolink-headings": "^5.0.0", "remark-custom-blockquotes": "1.0.0", "remark-extract-anchors": "1.0.0", @@ -126,10 +126,10 @@ "through2": "^2.0.3", "uglifyjs-webpack-plugin": "^1.1.6", "unist-util-find": "1.0.1", - "unist-util-find-all-between": "1.0.1", + "unist-util-find-all-between": "1.0.2", "unist-util-inspect": "4.1.3", "unist-util-remove": "1.0.1", - "unist-util-select": "1.5.0", + "unist-util-select": "2.0.0", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7", "webpack-merge": "^4.1.0" diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx index 2bb7014aaf11..305a71d5e02a 100644 --- a/src/components/Page/Page.jsx +++ b/src/components/Page/Page.jsx @@ -1,15 +1,15 @@ // Import External Dependencies -import React from 'react'; +import React from "react"; // Import Components -import PageLinks from '../PageLinks/PageLinks'; -import Markdown from '../Markdown/Markdown'; -import Contributors from '../Contributors/Contributors'; -import Placeholder from '../Placeholder/Placeholder'; -import Configuration from '../Configuration/Configuration'; +import PageLinks from "../PageLinks/PageLinks"; +import Markdown from "../Markdown/Markdown"; +import Contributors from "../Contributors/Contributors"; +import Placeholder from "../Placeholder/Placeholder"; +import Configuration from "../Configuration/Configuration"; // Load Styling -import './Page.scss'; +import "./Page.scss"; class Page extends React.Component { constructor(props) { @@ -37,7 +37,7 @@ class Page extends React.Component { ) .catch(error => this.setState({ - content: 'Error loading content.' + content: "Error loading content." }) ); } @@ -54,8 +54,8 @@ class Page extends React.Component { let contentRender; - if (typeof content === 'function') { - contentRender = content(Configuration); + if (typeof content === "function") { + contentRender = content(Configuration).props.children.slice(4); // Cut frontmatter information } else { contentRender = (
Date: Sat, 15 Dec 2018 23:49:29 +0100 Subject: [PATCH 14/20] Add support for inline links in comments --- jsLinks.js | 7 +-- package.json | 1 + prism.js | 47 ++++++++++--------- .../Configuration/Configuration.jsx | 45 ++++++++++-------- src/components/Configuration/components.js | 6 +-- src/content/api/{node.md => node.mdx} | 2 +- src/content/api/{stats.md => stats.mdx} | 2 +- yarn.lock | 47 +++++++++++++++++-- 8 files changed, 102 insertions(+), 55 deletions(-) rename src/content/api/{node.md => node.mdx} (99%) rename src/content/api/{stats.md => stats.mdx} (99%) diff --git a/jsLinks.js b/jsLinks.js index efb5c5b1325f..4459e55bd3e6 100644 --- a/jsLinks.js +++ b/jsLinks.js @@ -1,10 +1,11 @@ module.exports = jslinks; -jslinks.displayName = 'jslinks'; -jslinks.aliases = []; +jslinks.displayName = "jslinks"; +jslinks.aliases = ["js-with-links"]; function jslinks(Prism) { - Prism.languages['js-with-links-with-details'] = Prism.languages.extend('javascript', { + Prism.languages["js-with-links"] = Prism.languages.extend("javascript"); + Prism.languages["js-with-links-with-details"] = Prism.languages.extend("javascript", { keyword: { // pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/gi, // // pattern: /<[a-z]+ url=\"([^\"]+)\">(.|\n)*?<\/[a-z]+>/gi, diff --git a/package.json b/package.json index 18d4c9bebab4..d34c9f5820bc 100644 --- a/package.json +++ b/package.json @@ -148,6 +148,7 @@ "react-dom": "^16.2.0", "react-g-analytics": "0.4.2", "react-hot-loader": "^4.0.0-beta.12", + "react-markdown": "4.0.4", "react-router-dom": "^4.2.2", "react-tiny-popover": "3.4.2", "webpack.vote": "^0.1.2", diff --git a/prism.js b/prism.js index 8b1d38adcef9..5355f6a744ff 100644 --- a/prism.js +++ b/prism.js @@ -1,23 +1,23 @@ -const util = require('util'); +const util = require("util"); -const refractor = require('refractor/core.js'); -const languages = require('prism-languages'); +const refractor = require("refractor/core.js"); +const languages = require("prism-languages"); -var remark = require('remark'); -var parse = require('remark-parse'); -var htmlRemark = require('remark-html'); +var remark = require("remark"); +var parse = require("remark-parse"); +var htmlRemark = require("remark-html"); -const visit = require('unist-util-visit'); -var inspect = require('unist-util-inspect'); -var find = require('unist-util-find'); -var findAllBetween = require('unist-util-find-all-between'); +const visit = require("unist-util-visit"); +var inspect = require("unist-util-inspect"); +var find = require("unist-util-find"); +var findAllBetween = require("unist-util-find-all-between"); -refractor.register(require('./jsLinks.js')); -refractor.register(require('refractor/lang/json')) +refractor.register(require("./jsLinks.js")); +refractor.register(require("refractor/lang/json")); -var fs = require('fs'); +var fs = require("fs"); -var file = fs.readFileSync(__dirname + '/src/content/configuration/' + 'index.mdx', { encoding: 'utf8' }); +var file = fs.readFileSync(__dirname + "/src/content/configuration/" + "index.mdx", { encoding: "utf8" }); remark() .use(parse) @@ -27,7 +27,7 @@ remark() if (err) throw err; if (file) { fs.writeFileSync( - './index.html', + "./index.html", `
` + file.contents + @@ -40,7 +40,7 @@ function attacher({ include, exclude } = {}) { return transformer; function transformer(tree, file) { - visit(tree, 'code', visitor); + visit(tree, "code", visitor); function visitor(node) { const { lang } = node; @@ -58,18 +58,21 @@ function attacher({ include, exclude } = {}) { try { data.hChildren = refractor.highlight(node.value, lang); data.hChildren.forEach(node => { - if(node.properties && node.properties.className.includes('keyword')) { - node.properties.componentname = node.children[1].value.trim() - node.properties.url = node.children[2].children[0].value.replace(/"/g, '') + if (node.properties && node.properties.className.includes("keyword")) { + if (node.children[1]) { + node.properties.componentname = node.children[1].value.trim(); + } + if (node.children[2]) { + node.properties.url = node.children[2].children[0].value.replace(/"/g, ""); + } } - }) - + }); } catch (e) { throw e; } data.hProperties = data.hProperties || {}; - data.hProperties.className = ['hljs', ...(data.hProperties.className || []), `language-${lang}`]; + data.hProperties.className = ["hljs", ...(data.hProperties.className || []), `language-${lang}`]; } } } diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index 9c318e8fa79f..6cfcf857de50 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -1,64 +1,65 @@ -import React from 'react'; -import { Modes, Entry } from './components'; +import React from "react"; +import ReactMarkdown from "react-markdown"; +import { Details } from "./components"; const components = { link: (children, props) => { - return ; + return
; }, mode: (children, props) => { - return ; + return
; }, entry: (children, props) => { - return ; + return
; }, filename: (children, props) => { - return ; + return
; }, publicPath: (children, props) => { - return ; + return
; }, advancedOutput: (children, props) => { - return ; + return
; }, expert: (children, props) => { - return ; + return
; }, advancedModule: (children, props) => { - return ; + return
; }, alias: (children, props) => { - return ; + return
; }, advancedResolve: (children, props) => { - return ; + return
; }, hints: (children, props) => { - return ; + return
; }, devtool: (children, props) => { - return ; + return
; }, target: (children, props) => { - return ; + return
; }, externals: (children, props) => { - return ; + return
; }, stats: (children, props) => { - return ; + return
; }, advanced: (children, props) => { - return ; + return
; }, libraryTarget: (children, props) => { - return ; + return
; } }; const Pre = props => { const newChildren = React.Children.map(props.children.props.children, (child, i) => { if (React.isValidElement(child)) { - if (child.props.props.className.includes('keyword')) { + if (child.props.props.className.includes("keyword")) { if (!components[child.props.props.componentname]) return child; return components[child.props.props.componentname]( @@ -66,6 +67,10 @@ const Pre = props => { { url: child.props.props.url } ); } + + if (child.props.props.className.includes("comment")) { + return ; + } } return child; diff --git a/src/components/Configuration/components.js b/src/components/Configuration/components.js index ae64820cb403..1fc3dcabd7e7 100644 --- a/src/components/Configuration/components.js +++ b/src/components/Configuration/components.js @@ -26,7 +26,7 @@ const Card = ({ body }) => { ); }; -export class Modes extends React.Component { +export class Details extends React.Component { constructor(props) { super(props); this.state = { @@ -76,7 +76,3 @@ export class Modes extends React.Component { ); } } - -export const Entry = props => { - return {props.children}; -}; diff --git a/src/content/api/node.md b/src/content/api/node.mdx similarity index 99% rename from src/content/api/node.md rename to src/content/api/node.mdx index e726ab6e6152..a521b3c59292 100644 --- a/src/content/api/node.md +++ b/src/content/api/node.mdx @@ -37,7 +37,7 @@ import webpack from 'webpack'; The imported `webpack` function is fed a webpack [Configuration Object](/configuration/) and runs the webpack compiler if a callback function is provided: -``` js-with-links +``` js-with-links-with-details const webpack = require("webpack"); webpack({ diff --git a/src/content/api/stats.md b/src/content/api/stats.mdx similarity index 99% rename from src/content/api/stats.md rename to src/content/api/stats.mdx index a06d6e9d6edf..2740839f954c 100644 --- a/src/content/api/stats.md +++ b/src/content/api/stats.mdx @@ -20,7 +20,7 @@ The `--json > compilation-stats.json` flag indicates to webpack that it should e The top-level structure of the output JSON file is fairly straightforward but there are a few nested data structures as well. Each nested structure has a dedicated section below to make this document more consumable. Note that you can click links within the top-level structure below to jump to relevant sections and documentation: -```js-with-links +``` js-with-links-with-details { "version": "1.4.13", // Version of webpack used for the compilation "hash": "11593e3b3ac85436984a", // Compilation specific hash diff --git a/yarn.lock b/yarn.lock index 08023b0cb15d..11595e512cba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3112,7 +3112,7 @@ domhandler@2.1: dependencies: domelementtype "1" -domhandler@^2.3.0: +domhandler@^2.3.0, domhandler@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803" integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA== @@ -4874,6 +4874,17 @@ html-minifier@^3.2.3, html-minifier@^3.5.8: relateurl "0.2.x" uglify-js "3.4.x" +html-to-react@^1.3.3: + version "1.3.4" + resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.3.4.tgz#647b3a54fdec73a6461864b129fb0d1eec7d4589" + integrity sha512-/tWDdb/8Koi/QEP5YUY1653PcDpBnnMblXRhotnTuhFDjI1Fc6Wzox5d4sw73Xk5rM2OdM5np4AYjT/US/Wj7Q== + dependencies: + domhandler "^2.4.2" + escape-string-regexp "^1.0.5" + htmlparser2 "^3.10.0" + lodash.camelcase "^4.3.0" + ramda "^0.26" + html-void-elements@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.3.tgz#956707dbecd10cf658c92c5d27fee763aa6aa982" @@ -4896,7 +4907,7 @@ html-webpack-template@^6.1.0: resolved "https://registry.yarnpkg.com/html-webpack-template/-/html-webpack-template-6.2.0.tgz#3c9f15f616f4500927909d34adfbccb20d37943c" integrity sha512-wyzIjbe9yXGyQ6yAeFjWmku7YOlW85w1dxqLnAQ564uRNNoBhpZVTQl7ouROoyQrfZUSoPUJiw7oWn31NDiuQQ== -htmlparser2@^3.9.1: +htmlparser2@^3.10.0, htmlparser2@^3.9.1: version "3.10.0" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.0.tgz#5f5e422dcf6119c0d983ed36260ce9ded0bee464" integrity sha512-J1nEUGv+MkXS0weHNWVKJJ+UrLfePxRWpN3C9bEi9fLxL2+ggW94DQvgYVXsaT30PGwYRIZKNZXuyMhp3Di4bQ== @@ -6575,6 +6586,13 @@ md5.js@^1.3.4: inherits "^2.0.1" safe-buffer "^5.1.2" +mdast-add-list-metadata@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz#95e73640ce2fc1fa2dcb7ec443d09e2bfe7db4cf" + integrity sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA== + dependencies: + unist-util-visit-parents "1.1.2" + mdast-comment-marker@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/mdast-comment-marker/-/mdast-comment-marker-1.0.3.tgz#1ead204b73e8759d29785ef3024a1e43510d38e5" @@ -8762,6 +8780,11 @@ quotation@^1.0.0, quotation@^1.0.1: resolved "https://registry.yarnpkg.com/quotation/-/quotation-1.1.1.tgz#b599a2b7361a566086458014fda9d6b00326f169" integrity sha512-bjz7kEsfg6D3uMeed+VbeypnooGlX7enMnDbx0KLYEEM8J1k24jk2pc+1nyQ1sExnERz8xKXRSZ0EYNIwLM83g== +ramda@^0.26: + version "0.26.1" + resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06" + integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ== + randomatic@^3.0.0: version "3.1.1" resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed" @@ -8867,6 +8890,19 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-markdown@^4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-4.0.4.tgz#bdc882bc3eb4dfac45d57bfe58d8f482c5a85a64" + integrity sha512-G2dpkraP12A/1xZ1oJgm0hop213kscc7jMY0hqlx9VgxJ+5Jda1C+E+HVFL8PL0WGMVxgh95ksQzFXYGBcnQ9g== + dependencies: + html-to-react "^1.3.3" + mdast-add-list-metadata "1.0.1" + prop-types "^15.6.1" + remark-parse "^5.0.0" + unified "^6.1.5" + unist-util-visit "^1.3.0" + xtend "^4.0.1" + react-redux@^4.4.0: version "4.4.9" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.9.tgz#8ca6d4670925a454ce67086c2305e9630670909a" @@ -11301,7 +11337,7 @@ unified@^4.1.1: trough "^1.0.0" vfile "^1.0.0" -unified@^6.0.0, unified@^6.1.0, unified@^6.1.2, unified@^6.1.6: +unified@^6.0.0, unified@^6.1.0, unified@^6.1.2, unified@^6.1.5, unified@^6.1.6: version "6.2.0" resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba" integrity sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA== @@ -11463,6 +11499,11 @@ unist-util-visit-children@^1.0.0: resolved "https://registry.yarnpkg.com/unist-util-visit-children/-/unist-util-visit-children-1.1.2.tgz#bd78b53db9644b9c339ac502854f15471f964f5b" integrity sha512-q4t6aprUcSQ2/+xlswuh2wUKwUUuMmDjSkfwkMjeVwCXc8NqX8g0FSmNf68CznCmbkrsOPDUR0wj14bCFXXqbA== +unist-util-visit-parents@1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz#f6e3afee8bdbf961c0e6f028ea3c0480028c3d06" + integrity sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q== + unist-util-visit-parents@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.0.1.tgz#63fffc8929027bee04bfef7d2cce474f71cb6217" From 31bc91c2d890781a5073b16aadbc29df51daf286 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Sun, 16 Dec 2018 12:57:27 +0100 Subject: [PATCH 15/20] chore(site): Removed files, clean components --- jsLinks.js | 27 ---- package.json | 12 +- prism.js | 80 ----------- .../Configuration/Configuration.jsx | 2 +- src/components/Configuration/components.js | 31 ++-- src/content/api/node.mdx | 2 +- src/content/api/stats.mdx | 2 +- src/content/configuration/index.mdx | 2 +- webpack.common.js | 123 ++++++++-------- yarn.lock | 134 +----------------- 10 files changed, 99 insertions(+), 316 deletions(-) delete mode 100644 jsLinks.js delete mode 100644 prism.js diff --git a/jsLinks.js b/jsLinks.js deleted file mode 100644 index 4459e55bd3e6..000000000000 --- a/jsLinks.js +++ /dev/null @@ -1,27 +0,0 @@ -module.exports = jslinks; - -jslinks.displayName = "jslinks"; -jslinks.aliases = ["js-with-links"]; - -function jslinks(Prism) { - Prism.languages["js-with-links"] = Prism.languages.extend("javascript"); - Prism.languages["js-with-links-with-details"] = Prism.languages.extend("javascript", { - keyword: { - // pattern: /<[a-z]+>(.|\n)*?<\/[a-z]+>/gi, // - // pattern: /<[a-z]+ url=\"([^\"]+)\">(.|\n)*?<\/[a-z]+>/gi, - // pattern: /<([a-z]+ \"([^\"]+)\")>(.|\n)*?<\/[a-z]+>/gi, // - pattern: /<([a-z]+) \"([^\"]+)\">(.|\n?)*<\/\1>/gi, // with backrefence - greedy: true, - inside: { - tag: { - pattern: /(|<\/default>)/, - greedy: true, - inside: { - rest: Prism.languages.js - } - }, - rest: Prism.languages.js - } - } - }); -} diff --git a/package.json b/package.json index d34c9f5820bc..0701cfccea9e 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,11 @@ "serve": "npm run build && sirv start ./dist --port 4000", "deploy": "gh-pages -d dist" }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, "lint-staged": { "*.{js,jsx,md}": [ "npm run lint:js" @@ -111,7 +116,7 @@ "remark-extract-anchors": "1.0.0", "remark-loader": "^0.3.0", "remark-mermaid": "^0.2.0", - "remark-refractor": "1.0.0", + "remark-refractor": "1.1.0", "remark-responsive-tables": "1.0.0", "remark-slug": "^5.0.0", "request": "^2.81.0", @@ -125,11 +130,6 @@ "tap-spot": "^1.1.1", "through2": "^2.0.3", "uglifyjs-webpack-plugin": "^1.1.6", - "unist-util-find": "1.0.1", - "unist-util-find-all-between": "1.0.2", - "unist-util-inspect": "4.1.3", - "unist-util-remove": "1.0.1", - "unist-util-select": "2.0.0", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7", "webpack-merge": "^4.1.0" diff --git a/prism.js b/prism.js deleted file mode 100644 index 5355f6a744ff..000000000000 --- a/prism.js +++ /dev/null @@ -1,80 +0,0 @@ -const util = require("util"); - -const refractor = require("refractor/core.js"); -const languages = require("prism-languages"); - -var remark = require("remark"); -var parse = require("remark-parse"); -var htmlRemark = require("remark-html"); - -const visit = require("unist-util-visit"); -var inspect = require("unist-util-inspect"); -var find = require("unist-util-find"); -var findAllBetween = require("unist-util-find-all-between"); - -refractor.register(require("./jsLinks.js")); -refractor.register(require("refractor/lang/json")); - -var fs = require("fs"); - -var file = fs.readFileSync(__dirname + "/src/content/configuration/" + "index.mdx", { encoding: "utf8" }); - -remark() - .use(parse) - .use(attacher) - .use(htmlRemark) - .process(file, function(err, file) { - if (err) throw err; - if (file) { - fs.writeFileSync( - "./index.html", - ` -
` + - file.contents + - `
` - ); - } - }); - -function attacher({ include, exclude } = {}) { - return transformer; - - function transformer(tree, file) { - visit(tree, "code", visitor); - - function visitor(node) { - const { lang } = node; - - if (!lang || (include && !~include.indexOf(lang)) || (exclude && ~exclude.indexOf(lang))) { - return; - } - - let { data } = node; - - if (!data) { - node.data = data = {}; - } - - try { - data.hChildren = refractor.highlight(node.value, lang); - data.hChildren.forEach(node => { - if (node.properties && node.properties.className.includes("keyword")) { - if (node.children[1]) { - node.properties.componentname = node.children[1].value.trim(); - } - if (node.children[2]) { - node.properties.url = node.children[2].children[0].value.replace(/"/g, ""); - } - } - }); - } catch (e) { - throw e; - } - - data.hProperties = data.hProperties || {}; - data.hProperties.className = ["hljs", ...(data.hProperties.className || []), `language-${lang}`]; - } - } -} - -module.exports = attacher; diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index 6cfcf857de50..e0caa8ca1670 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -57,7 +57,7 @@ const components = { }; const Pre = props => { - const newChildren = React.Children.map(props.children.props.children, (child, i) => { + const newChildren = React.Children.map(props.children.props.children, child => { if (React.isValidElement(child)) { if (child.props.props.className.includes("keyword")) { if (!components[child.props.props.componentname]) return child; diff --git a/src/components/Configuration/components.js b/src/components/Configuration/components.js index 1fc3dcabd7e7..75806fb88a8e 100644 --- a/src/components/Configuration/components.js +++ b/src/components/Configuration/components.js @@ -1,8 +1,9 @@ -import React from 'react'; -import Popover from 'react-tiny-popover'; -import './Configuration.scss'; +import React from "react"; +import Popover from "react-tiny-popover"; +import "./Configuration.scss"; +import { timeout } from "q"; -const isFirstChild = child => typeof child === 'string' && child !== ' '; +const isFirstChild = child => typeof child === "string" && child !== " "; const removeSpaces = child => (isFirstChild(child) ? child.trim() : child); @@ -41,7 +42,7 @@ export class Details extends React.Component { const closeDefault = children.findIndex(child => { if (React.isValidElement(child)) { - return child.props.props.className.includes('tag') && child.props.children.length === 4; + return child.props.props.className.includes("tag") && child.props.children.length === 4; } }); @@ -58,20 +59,30 @@ export class Details extends React.Component { }); } + clickOutsideHandler = () => { + this.setState({ open: false }); + }; + + toggleVisibility = () => { + this.setState({ open: !this.state.open }); + }; + render() { const { open, summary, content } = this.state; - const className = open ? 'open' : ''; + const className = open ? "open" : ""; return ( this.setState({ open: false })} - containerClassName={'shadow'} + onClickOutside={this.clickOutsideHandler} + containerClassName={"shadow"} content={} > - this.setState({ open: !this.state.open })}>{summary} + + {summary} + ); } diff --git a/src/content/api/node.mdx b/src/content/api/node.mdx index a521b3c59292..e726ab6e6152 100644 --- a/src/content/api/node.mdx +++ b/src/content/api/node.mdx @@ -37,7 +37,7 @@ import webpack from 'webpack'; The imported `webpack` function is fed a webpack [Configuration Object](/configuration/) and runs the webpack compiler if a callback function is provided: -``` js-with-links-with-details +``` js-with-links const webpack = require("webpack"); webpack({ diff --git a/src/content/api/stats.mdx b/src/content/api/stats.mdx index 2740839f954c..b2c21c045359 100644 --- a/src/content/api/stats.mdx +++ b/src/content/api/stats.mdx @@ -20,7 +20,7 @@ The `--json > compilation-stats.json` flag indicates to webpack that it should e The top-level structure of the output JSON file is fairly straightforward but there are a few nested data structures as well. Each nested structure has a dedicated section below to make this document more consumable. Note that you can click links within the top-level structure below to jump to relevant sections and documentation: -``` js-with-links-with-details +``` js-with-links { "version": "1.4.13", // Version of webpack used for the compilation "hash": "11593e3b3ac85436984a", // Compilation specific hash diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx index 8f07015e1af2..a0f817b65278 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -45,7 +45,7 @@ W> Notice that throughout the configuration we use Node's built-in [path module] __webpack.config.js__ -```js-with-links-with-details +```js-with-links-details const path = require('path'); module.exports = { diff --git a/webpack.common.js b/webpack.common.js index 9c91d3d6c7f8..8513eb927142 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,65 +1,64 @@ -const fs = require('fs'); -const path = require('path'); -const webpack = require('webpack'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const fs = require("fs"); +const path = require("path"); +const webpack = require("webpack"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = (env = {}) => ({ - context: path.resolve(__dirname, './src'), + context: path.resolve(__dirname, "./src"), entry: { - index: './index.jsx', + index: "./index.jsx", vendor: [ - 'react', // Replace with preact or inferno - 'react-dom', // Replace with preact or inferno - 'react-router-dom' + "react", // Replace with preact or inferno + "react-dom", // Replace with preact or inferno + "react-router-dom" ] }, resolve: { symlinks: false, - extensions: ['.js', '.jsx', '.scss'] + extensions: [".js", ".jsx", ".scss"] }, module: { rules: [ { test: /\.mdx$/, use: [ - 'babel-loader', + "babel-loader", { - loader: '@mdx-js/loader', + loader: "@mdx-js/loader", options: { mdPlugins: [ - require('remark-slug'), - require('remark-mermaid'), - require('remark-refractor'), + require("remark-slug"), + require("remark-mermaid"), [ - require('remark-custom-blockquotes'), + require("remark-custom-blockquotes"), { mapping: { - 'T>': 'tip', - 'W>': 'warning', - '?>': 'todo' + "T>": "tip", + "W>": "warning", + "?>": "todo" } } ], [ - require('@rigor789/remark-autolink-headings'), + require("@rigor789/remark-autolink-headings"), { - behaviour: 'append' + behaviour: "append" } ], [ - require('remark-responsive-tables'), + require("remark-responsive-tables"), { classnames: { - title: 'title', - description: 'description', - content: 'content', - mobile: 'mobile', - desktop: 'desktop' + title: "title", + description: "description", + content: "content", + mobile: "mobile", + desktop: "desktop" } } ], - require('./prism') + require("remark-refractor") ] } } @@ -68,37 +67,37 @@ module.exports = (env = {}) => ({ { test: /\.md$/, use: { - loader: 'remark-loader', + loader: "remark-loader", options: { plugins: [ - require('remark-slug'), - require('remark-mermaid'), - require('remark-refractor'), + require("remark-slug"), + require("remark-mermaid"), + require("remark-refractor"), [ - require('remark-custom-blockquotes'), + require("remark-custom-blockquotes"), { mapping: { - 'T>': 'tip', - 'W>': 'warning', - '?>': 'todo' + "T>": "tip", + "W>": "warning", + "?>": "todo" } } ], [ - require('@rigor789/remark-autolink-headings'), + require("@rigor789/remark-autolink-headings"), { - behaviour: 'append' + behaviour: "append" } ], [ - require('remark-responsive-tables'), + require("remark-responsive-tables"), { classnames: { - title: 'title', - description: 'description', - content: 'content', - mobile: 'mobile', - desktop: 'desktop' + title: "title", + description: "description", + content: "content", + mobile: "mobile", + desktop: "desktop" } } ] @@ -109,11 +108,11 @@ module.exports = (env = {}) => ({ { test: /\.font.js$/, loader: ExtractTextPlugin.extract({ - fallback: 'style-loader', + fallback: "style-loader", use: [ - 'css-loader', + "css-loader", { - loader: 'fontgen-loader', + loader: "fontgen-loader", options: { embed: true } } ] @@ -123,9 +122,9 @@ module.exports = (env = {}) => ({ test: /\.jsx?$/, exclude: /node_modules/, use: [ - 'babel-loader', + "babel-loader", { - loader: 'eslint-loader', + loader: "eslint-loader", options: { fix: true } } ] @@ -133,14 +132,14 @@ module.exports = (env = {}) => ({ { test: /\.s?css$/, loader: ExtractTextPlugin.extract({ - fallback: 'style-loader', + fallback: "style-loader", use: [ - 'css-loader', - 'postcss-loader', + "css-loader", + "postcss-loader", { - loader: 'sass-loader', + loader: "sass-loader", options: { - includePaths: [path.resolve(__dirname, './src/styles/partials')] + includePaths: [path.resolve(__dirname, "./src/styles/partials")] } } ] @@ -149,21 +148,21 @@ module.exports = (env = {}) => ({ { test: /\.woff2?$/, use: { - loader: 'file-loader', + loader: "file-loader", options: { - prefix: 'font/' + prefix: "font/" } } }, { test: /\.(jpg|png|svg|ico)$/, - use: 'file-loader' + use: "file-loader" } ] }, plugins: [ new ExtractTextPlugin({ - filename: '[chunkhash].css', + filename: "[chunkhash].css", allChunks: true, disable: env.dev }) @@ -172,8 +171,8 @@ module.exports = (env = {}) => ({ children: false }, output: { - path: path.resolve(__dirname, './dist'), - publicPath: '/', - filename: '[name].bundle.js' + path: path.resolve(__dirname, "./dist"), + publicPath: "/", + filename: "[name].bundle.js" } }); diff --git a/yarn.lock b/yarn.lock index 11595e512cba..9814cb423e71 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2555,11 +2555,6 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" -css-selector-parser@^1.1.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.3.0.tgz#5f1ad43e2d8eefbfdc304fcd39a521664943e3eb" - integrity sha1-XxrUPi2O77/cME/NOaUhZklD4+s= - css-selector-tokenizer@^0.7.0: version "0.7.1" resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz#a177271a8bca5019172f4f891fc6eed9cbf68d5d" @@ -6276,11 +6271,6 @@ lodash.intersection@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.intersection/-/lodash.intersection-4.4.0.tgz#0a11ba631d0e95c23c7f2f4cbb9a692ed178e705" integrity sha1-ChG6Yx0OlcI8fy9Mu5ppLtF45wU= -lodash.iteratee@^4.5.0: - version "4.7.0" - resolved "https://registry.yarnpkg.com/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz#be4177db289a8ccc3c0990f1db26b5b22fc1554c" - integrity sha1-vkF32yiajMw8CZDx2ya1si/BVUw= - lodash.map@^4.4.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3" @@ -6394,11 +6384,6 @@ loglevel@^1.4.1: resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa" integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po= -longest-streak@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-1.0.0.tgz#d06597c4d4c31b52ccb1f5d8f8fe7148eafd6965" - integrity sha1-0GWXxNTDG1LMsfXY+P5xSOr9aWU= - longest-streak@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e" @@ -6512,11 +6497,6 @@ markdown-loader@^4.0.0: loader-utils "^1.1.0" marked "^0.5.0" -markdown-table@^0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-0.4.0.tgz#890c2c1b3bfe83fb00e4129b8e4cfe645270f9d1" - integrity sha1-iQwsGzv+g/sA5BKbjkz+ZFJw+dE= - markdown-table@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786" @@ -7251,11 +7231,6 @@ normalizeurl@^1.0.0: resolved "https://registry.yarnpkg.com/normalizeurl/-/normalizeurl-1.0.0.tgz#4b1a458cd0c7d0856436f69c6b51047ab6855317" integrity sha1-SxpFjNDH0IVkNvaca1EEeraFUxc= -not@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/not/-/not-0.1.0.tgz#c9691c1746c55dcfbe54cbd8bd4ff041bc2b519d" - integrity sha1-yWkcF0bFXc++VMvYvU/wQbwrUZ0= - npm-bundled@^1.0.1: version "1.0.5" resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979" @@ -7326,7 +7301,7 @@ npm-which@^3.0.1: gauge "~2.7.3" set-blocking "~2.0.0" -nth-check@^1.0.1, nth-check@^1.0.2, nth-check@~1.0.1: +nth-check@^1.0.2, nth-check@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c" integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg== @@ -8890,7 +8865,7 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-markdown@^4.0.4: +react-markdown@4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-4.0.4.tgz#bdc882bc3eb4dfac45d57bfe58d8f482c5a85a64" integrity sha512-G2dpkraP12A/1xZ1oJgm0hop213kscc7jMY0hqlx9VgxJ+5Jda1C+E+HVFL8PL0WGMVxgh95ksQzFXYGBcnQ9g== @@ -9346,21 +9321,6 @@ remark-message-control@^4.0.0: unified-message-control "^1.0.0" xtend "^4.0.1" -remark-parse@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-1.1.0.tgz#c3ca10f9a8da04615c28f09aa4e304510526ec21" - integrity sha1-w8oQ+ajaBGFcKPCapOMEUQUm7CE= - dependencies: - collapse-white-space "^1.0.0" - extend "^3.0.0" - parse-entities "^1.0.2" - repeat-string "^1.5.4" - trim "0.0.1" - trim-trailing-lines "^1.0.0" - unherit "^1.0.4" - unist-util-remove-position "^1.0.0" - vfile-location "^2.0.0" - remark-parse@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-4.0.0.tgz#99f1f049afac80382366e2e0d0bd55429dd45d8b" @@ -9434,10 +9394,10 @@ remark-react@^4.0.0: hast-util-sanitize "^1.0.0" mdast-util-to-hast "^3.0.0" -remark-refractor@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/remark-refractor/-/remark-refractor-1.0.0.tgz#d9102af70a92abc56d8de07e54f69b1770fb045a" - integrity sha512-4R3nP+OAB/elBoNQmY9HOXuO2N+EmADGkhGdW24AsMMAKFj0P+FfL1x/vsaKG+UdKZHUA7VTwhSeWWisqjieTw== +remark-refractor@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/remark-refractor/-/remark-refractor-1.1.0.tgz#efc5dd599494387e6b8952916014ec79deea6559" + integrity sha512-EKlPS92ymM852QQKOzyVEs/UcdMKe0f7A1FfHle2NCHsvrCFPdb4uQly0BReF3mb61zrVRNyILtngezQwWr0Yw== dependencies: prism-languages "0.4.0" refractor "2.4.1" @@ -9473,20 +9433,6 @@ remark-squeeze-paragraphs@^3.0.1: dependencies: mdast-squeeze-paragraphs "^3.0.0" -remark-stringify@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-1.1.0.tgz#a7105e25b9ee2bf9a49b75d2c423f11b06ae2092" - integrity sha1-pxBeJbnuK/mkm3XSxCPxGwauIJI= - dependencies: - ccount "^1.0.0" - extend "^3.0.0" - longest-streak "^1.0.0" - markdown-table "^0.4.0" - parse-entities "^1.0.2" - repeat-string "^1.5.4" - stringify-entities "^1.0.1" - unherit "^1.0.4" - remark-stringify@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-4.0.0.tgz#4431884c0418f112da44991b4e356cfe37facd87" @@ -9536,15 +9482,6 @@ remark@^10.0.1: remark-stringify "^6.0.0" unified "^7.0.0" -remark@^5.0.1: - version "5.1.0" - resolved "https://registry.yarnpkg.com/remark/-/remark-5.1.0.tgz#cb463bd3dbcb4b99794935eee1cf71d7a8e3068c" - integrity sha1-y0Y709vLS5l5STXu4c9x16jjBow= - dependencies: - remark-parse "^1.1.0" - remark-stringify "^1.1.0" - unified "^4.1.1" - remark@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/remark/-/remark-8.0.0.tgz#287b6df2fe1190e263c1d15e486d3fa835594d6d" @@ -11325,18 +11262,6 @@ unified-message-control@^1.0.0: unist-util-visit "^1.0.0" vfile-location "^2.0.0" -unified@^4.1.1: - version "4.2.1" - resolved "https://registry.yarnpkg.com/unified/-/unified-4.2.1.tgz#76ff43aa8da430f6e7e4a55c84ebac2ad2cfcd2e" - integrity sha1-dv9Dqo2kMPbn5KVchOusKtLPzS4= - dependencies: - bail "^1.0.0" - extend "^3.0.0" - has "^1.0.1" - once "^1.3.3" - trough "^1.0.0" - vfile "^1.0.0" - unified@^6.0.0, unified@^6.1.0, unified@^6.1.2, unified@^6.1.5, unified@^6.1.6: version "6.2.0" resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba" @@ -11418,34 +11343,11 @@ unist-builder@^1.0.1: dependencies: object-assign "^4.1.0" -unist-util-find-all-between@1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/unist-util-find-all-between/-/unist-util-find-all-between-1.0.2.tgz#e1d674e31c8a55f1c48339a6fc4c2d69d675bb12" - integrity sha512-7KkHJ7+tRc4lSrvKxB0cLq2Un/B0FjsTnZlOsLFlWsCk6chjrOEutsq1//bFsRo7yLOtDLj8qa6Y/Bf159s6rg== - dependencies: - unist-util-is "^2.0.0" - -unist-util-find@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/unist-util-find/-/unist-util-find-1.0.1.tgz#1062bbb6928c7a97c6adc89b53745d4c46c222a2" - integrity sha1-EGK7tpKMepfGrcibU3RdTEbCIqI= - dependencies: - lodash.iteratee "^4.5.0" - remark "^5.0.1" - unist-util-visit "^1.1.0" - unist-util-generated@^1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.3.tgz#ca650470aef2fbcc5fe54c465bc26b41ca109e2b" integrity sha512-qlPeDqnQnd84KIqwphzOR+l02cxjDzvEYEBl84EjmKRrX4eUmjyAo8xJv1SCDhJqNjyHRnBMZWNKAiBtXE6hBg== -unist-util-inspect@4.1.3: - version "4.1.3" - resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-4.1.3.tgz#39470e6d77485db285966df78431219aa1287822" - integrity sha512-Fv9R88ZBbDp7mHN+wsbxS1r8VW3unyhZh/F18dcJRQsg0+g3DxNQnMS+AEG/uotB8Md+HMK/TfzSU5lUDWxkZg== - dependencies: - is-empty "^1.0.0" - unist-util-is@^2.0.0, unist-util-is@^2.1.1, unist-util-is@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db" @@ -11470,25 +11372,13 @@ unist-util-remove-position@^1.0.0: dependencies: unist-util-visit "^1.1.0" -unist-util-remove@1.0.1, unist-util-remove@^1.0.0: +unist-util-remove@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.1.tgz#3e967d2aeb3ee9e7f0ee8354172986fba7ff33a5" integrity sha512-nL+3O0nBB2Oi8ixVzIfJQLtNOMPIFzwoAIKvhDzEL8B15Nq7EY0KBQPYULjNrEmrwYMCkWp5XGTQiAlYZAL/rw== dependencies: unist-util-is "^2.0.0" -unist-util-select@2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/unist-util-select/-/unist-util-select-2.0.0.tgz#226b1a673eaf255302133ff94e450148a021c2c6" - integrity sha512-fRQqhrpgRIwdaeeZwbgDO84VyiyQP6cOcbzCao4saXuMuP3fLiWkssEI+o71OC2mASWqa9JEEYiGOV8EqpStPw== - dependencies: - css-selector-parser "^1.1.0" - debug "^3.1.0" - not "^0.1.0" - nth-check "^1.0.1" - unist-util-is "^2.1.2" - zwitch "^1.0.3" - unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6" @@ -11800,11 +11690,6 @@ vfile-statistics@^1.1.0: resolved "https://registry.yarnpkg.com/vfile-statistics/-/vfile-statistics-1.1.2.tgz#c50132627e4669a3afa07c64ff1e7aa7695e8151" integrity sha512-16wAC9eEGXdsD35LX9m/iXCRIZyX5LIrDgDtAF92rbATSqsBRbC4n05e0Rj5vt3XRpcKu0UJeWnTxWsSyvNZ+w== -vfile@^1.0.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/vfile/-/vfile-1.4.0.tgz#c0fd6fa484f8debdb771f68c31ed75d88da97fe7" - integrity sha1-wP1vpIT43r23cfaMMe112I2pf+c= - vfile@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a" @@ -12337,8 +12222,3 @@ zepto@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/zepto/-/zepto-1.2.0.tgz#e127bd9e66fd846be5eab48c1394882f7c0e4f98" integrity sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g= - -zwitch@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.3.tgz#159fae4b3f737db1e42bf321d3423e4c96688a18" - integrity sha512-aynRpmJDw7JIq6X4NDWJoiK1yVSiG57ArWSg4HLC1SFupX5/bo0Cf4jpX0ifwuzBfxpYBuNSyvMlWNNRuy3cVA== From 4928360a6e1ba7e38e02cb97cc5aecb2ebf3b7a0 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Sun, 6 Jan 2019 18:25:41 +0100 Subject: [PATCH 16/20] chore(ux): Added comments, remove dead code --- .editorconfig | 1 + src/components/Configuration/components.js | 41 ++++-- src/components/Page/Page.jsx | 21 +-- src/content/concepts/index.md | 1 - webpack.common.js | 164 +++++++++------------ 5 files changed, 104 insertions(+), 124 deletions(-) diff --git a/.editorconfig b/.editorconfig index abed2e2e82db..53a646e2741c 100644 --- a/.editorconfig +++ b/.editorconfig @@ -11,6 +11,7 @@ insert_final_newline = true charset = utf-8 indent_style = space indent_size = 2 +quote_type = single # Format Configs [.eslintignore,*rc] diff --git a/src/components/Configuration/components.js b/src/components/Configuration/components.js index 75806fb88a8e..223a62499bcd 100644 --- a/src/components/Configuration/components.js +++ b/src/components/Configuration/components.js @@ -1,9 +1,11 @@ -import React from "react"; -import Popover from "react-tiny-popover"; -import "./Configuration.scss"; -import { timeout } from "q"; +import React from 'react'; +import Popover from 'react-tiny-popover'; +import './Configuration.scss'; +import { timeout } from 'q'; -const isFirstChild = child => typeof child === "string" && child !== " "; +const DEFAULT_CHILDREN_SIZE = 4; + +const isFirstChild = child => typeof child === 'string' && child !== ' '; const removeSpaces = child => (isFirstChild(child) ? child.trim() : child); @@ -40,21 +42,27 @@ export class Details extends React.Component { componentDidMount() { const { children, url } = this.props; - const closeDefault = children.findIndex(child => { + // Find the index of + const closeDefaultTagIndex = children.findIndex(child => { if (React.isValidElement(child)) { - return child.props.props.className.includes("tag") && child.props.children.length === 4; + return ( + child.props.props.className.includes('tag') && + child.props.children.length === DEFAULT_CHILDREN_SIZE + ); } }); - const newChildren = children - .splice(2, closeDefault - 3) + // Summary is the part of the snippet that would be shown in the code snippet, + // to get it we need to cut the enclosing tags + const summary = children + .splice(2, closeDefaultTagIndex - 3) .map(removeSpaces) .map((child, i) => addLink(child, i, url)); - children.splice(0, 4); // Remove + children.splice(0, DEFAULT_CHILDREN_SIZE); // Remove information this.setState({ - summary: newChildren, + summary, content: children }); } @@ -69,18 +77,19 @@ export class Details extends React.Component { render() { const { open, summary, content } = this.state; - const className = open ? "open" : ""; return ( } > - + {summary} diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx index 305a71d5e02a..9bac4f7decf8 100644 --- a/src/components/Page/Page.jsx +++ b/src/components/Page/Page.jsx @@ -1,15 +1,15 @@ // Import External Dependencies -import React from "react"; +import React from 'react'; // Import Components -import PageLinks from "../PageLinks/PageLinks"; -import Markdown from "../Markdown/Markdown"; -import Contributors from "../Contributors/Contributors"; -import Placeholder from "../Placeholder/Placeholder"; -import Configuration from "../Configuration/Configuration"; +import PageLinks from '../PageLinks/PageLinks'; +import Markdown from '../Markdown/Markdown'; +import Contributors from '../Contributors/Contributors'; +import Placeholder from '../Placeholder/Placeholder'; +import Configuration from '../Configuration/Configuration'; // Load Styling -import "./Page.scss"; +import './Page.scss'; class Page extends React.Component { constructor(props) { @@ -37,7 +37,7 @@ class Page extends React.Component { ) .catch(error => this.setState({ - content: "Error loading content." + content: 'Error loading content.' }) ); } @@ -48,13 +48,14 @@ class Page extends React.Component { const { contentLoaded } = this.state; const loadRelated = contentLoaded && related && related.length !== 0; - const loadContributors = contentLoaded && contributors && contributors.length !== 0; + const loadContributors = + contentLoaded && contributors && contributors.length !== 0; const { content } = this.state; let contentRender; - if (typeof content === "function") { + if (typeof content === 'function') { contentRender = content(Configuration).props.children.slice(4); // Cut frontmatter information } else { contentRender = ( diff --git a/src/content/concepts/index.md b/src/content/concepts/index.md index fe853ab3af1c..7b207d70a558 100644 --- a/src/content/concepts/index.md +++ b/src/content/concepts/index.md @@ -14,7 +14,6 @@ contributors: - arjunsajeev - byzyk - yairhaimo - - EugeneHlushko - farskid - LukeMwila --- diff --git a/webpack.common.js b/webpack.common.js index 8513eb927142..4713d7dc0255 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,65 +1,67 @@ -const fs = require("fs"); -const path = require("path"); -const webpack = require("webpack"); -const CopyWebpackPlugin = require("copy-webpack-plugin"); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); + +const mdPlugins = [ + require('remark-slug'), + require('remark-mermaid'), + [ + require('remark-custom-blockquotes'), + { + mapping: { + 'T>': 'tip', + 'W>': 'warning', + '?>': 'todo' + } + } + ], + [ + require('@rigor789/remark-autolink-headings'), + { + behaviour: 'append' + } + ], + [ + require('remark-responsive-tables'), + { + classnames: { + title: 'title', + description: 'description', + content: 'content', + mobile: 'mobile', + desktop: 'desktop' + } + } + ], + require('remark-refractor') +]; module.exports = (env = {}) => ({ - context: path.resolve(__dirname, "./src"), + context: path.resolve(__dirname, './src'), entry: { - index: "./index.jsx", + index: './index.jsx', vendor: [ - "react", // Replace with preact or inferno - "react-dom", // Replace with preact or inferno - "react-router-dom" + 'react', // Replace with preact or inferno + 'react-dom', // Replace with preact or inferno + 'react-router-dom' ] }, resolve: { symlinks: false, - extensions: [".js", ".jsx", ".scss"] + extensions: ['.js', '.jsx', '.scss'] }, module: { rules: [ { test: /\.mdx$/, use: [ - "babel-loader", + 'babel-loader', { - loader: "@mdx-js/loader", + loader: '@mdx-js/loader', options: { - mdPlugins: [ - require("remark-slug"), - require("remark-mermaid"), - [ - require("remark-custom-blockquotes"), - { - mapping: { - "T>": "tip", - "W>": "warning", - "?>": "todo" - } - } - ], - [ - require("@rigor789/remark-autolink-headings"), - { - behaviour: "append" - } - ], - [ - require("remark-responsive-tables"), - { - classnames: { - title: "title", - description: "description", - content: "content", - mobile: "mobile", - desktop: "desktop" - } - } - ], - require("remark-refractor") - ] + mdPlugins } } ] @@ -67,52 +69,20 @@ module.exports = (env = {}) => ({ { test: /\.md$/, use: { - loader: "remark-loader", + loader: 'remark-loader', options: { - plugins: [ - require("remark-slug"), - require("remark-mermaid"), - require("remark-refractor"), - [ - require("remark-custom-blockquotes"), - { - mapping: { - "T>": "tip", - "W>": "warning", - "?>": "todo" - } - } - ], - [ - require("@rigor789/remark-autolink-headings"), - { - behaviour: "append" - } - ], - [ - require("remark-responsive-tables"), - { - classnames: { - title: "title", - description: "description", - content: "content", - mobile: "mobile", - desktop: "desktop" - } - } - ] - ] + plugins: mdPlugins } } }, { test: /\.font.js$/, loader: ExtractTextPlugin.extract({ - fallback: "style-loader", + fallback: 'style-loader', use: [ - "css-loader", + 'css-loader', { - loader: "fontgen-loader", + loader: 'fontgen-loader', options: { embed: true } } ] @@ -122,9 +92,9 @@ module.exports = (env = {}) => ({ test: /\.jsx?$/, exclude: /node_modules/, use: [ - "babel-loader", + 'babel-loader', { - loader: "eslint-loader", + loader: 'eslint-loader', options: { fix: true } } ] @@ -132,14 +102,14 @@ module.exports = (env = {}) => ({ { test: /\.s?css$/, loader: ExtractTextPlugin.extract({ - fallback: "style-loader", + fallback: 'style-loader', use: [ - "css-loader", - "postcss-loader", + 'css-loader', + 'postcss-loader', { - loader: "sass-loader", + loader: 'sass-loader', options: { - includePaths: [path.resolve(__dirname, "./src/styles/partials")] + includePaths: [path.resolve(__dirname, './src/styles/partials')] } } ] @@ -148,21 +118,21 @@ module.exports = (env = {}) => ({ { test: /\.woff2?$/, use: { - loader: "file-loader", + loader: 'file-loader', options: { - prefix: "font/" + prefix: 'font/' } } }, { test: /\.(jpg|png|svg|ico)$/, - use: "file-loader" + use: 'file-loader' } ] }, plugins: [ new ExtractTextPlugin({ - filename: "[chunkhash].css", + filename: '[chunkhash].css', allChunks: true, disable: env.dev }) @@ -171,8 +141,8 @@ module.exports = (env = {}) => ({ children: false }, output: { - path: path.resolve(__dirname, "./dist"), - publicPath: "/", - filename: "[name].bundle.js" + path: path.resolve(__dirname, './dist'), + publicPath: '/', + filename: '[name].bundle.js' } }); From e9f22886ee2abde88d3269844dcac7b0ce49e57f Mon Sep 17 00:00:00 2001 From: Eugene Hlushko Date: Sun, 6 Jan 2019 21:25:59 +0100 Subject: [PATCH 17/20] Update src/components/Configuration/Configuration.jsx Co-Authored-By: montogeek --- src/components/Configuration/Configuration.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index e0caa8ca1670..f116540305a0 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -2,7 +2,10 @@ import React from "react"; import ReactMarkdown from "react-markdown"; import { Details } from "./components"; -const components = { +const detailComponentsList = ['link', 'mode', 'entry', 'filename', 'publicPath', 'advancedOutput', 'expert', 'advancedModule', 'alias', 'advancedResolve', 'hints', 'devtool', 'target', 'externals', 'stats', 'advanced', 'libraryTarget']; +const detailsComponent = (children, props) => { + return
; +} link: (children, props) => { return
; }, From 768f5cc6a420b41c73d5cb21837058d413a102df Mon Sep 17 00:00:00 2001 From: Eugene Hlushko Date: Sun, 6 Jan 2019 21:26:15 +0100 Subject: [PATCH 18/20] Update src/components/Configuration/Configuration.jsx Co-Authored-By: montogeek --- src/components/Configuration/Configuration.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index f116540305a0..861f89d6e990 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -63,7 +63,7 @@ const Pre = props => { const newChildren = React.Children.map(props.children.props.children, child => { if (React.isValidElement(child)) { if (child.props.props.className.includes("keyword")) { - if (!components[child.props.props.componentname]) return child; + if (!detailComponentsList.includes[child.props.props.componentname]) return child; return components[child.props.props.componentname]( child.props.children.slice(4, React.Children.count(child.props.children) - 4), From ac78cae16377245ca258e1bbb2a8157105812e78 Mon Sep 17 00:00:00 2001 From: Eugene Hlushko Date: Sun, 6 Jan 2019 21:26:27 +0100 Subject: [PATCH 19/20] Update src/components/Configuration/Configuration.jsx Co-Authored-By: montogeek --- src/components/Configuration/Configuration.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index 861f89d6e990..bda95dad3268 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -65,7 +65,7 @@ const Pre = props => { if (child.props.props.className.includes("keyword")) { if (!detailComponentsList.includes[child.props.props.componentname]) return child; - return components[child.props.props.componentname]( + return detailsComponent( child.props.children.slice(4, React.Children.count(child.props.children) - 4), { url: child.props.props.url } ); From 6aabf0d95f387ffa9e3dc0d1a3fdeba0f9ca6340 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Sat, 12 Jan 2019 18:28:32 +0100 Subject: [PATCH 20/20] fix(ux) Use correct Array.includes function --- .../Configuration/Configuration.jsx | 62 +------------------ 1 file changed, 2 insertions(+), 60 deletions(-) diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index bda95dad3268..1200a1d5ba4d 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -3,72 +3,14 @@ import ReactMarkdown from "react-markdown"; import { Details } from "./components"; const detailComponentsList = ['link', 'mode', 'entry', 'filename', 'publicPath', 'advancedOutput', 'expert', 'advancedModule', 'alias', 'advancedResolve', 'hints', 'devtool', 'target', 'externals', 'stats', 'advanced', 'libraryTarget']; -const detailsComponent = (children, props) => { - return
; -} - link: (children, props) => { - return
; - }, - mode: (children, props) => { - return
; - }, - entry: (children, props) => { - return
; - }, - filename: (children, props) => { - return
; - }, - publicPath: (children, props) => { - return
; - }, - advancedOutput: (children, props) => { - return
; - }, - expert: (children, props) => { - return
; - }, - advancedModule: (children, props) => { - return
; - }, - alias: (children, props) => { - return
; - }, - advancedResolve: (children, props) => { - return
; - }, - hints: (children, props) => { - return
; - }, - devtool: (children, props) => { - return
; - }, - target: (children, props) => { - return
; - }, - externals: (children, props) => { - return
; - }, - stats: (children, props) => { - return
; - }, - advanced: (children, props) => { - return
; - }, - libraryTarget: (children, props) => { - return
; - } -}; const Pre = props => { const newChildren = React.Children.map(props.children.props.children, child => { if (React.isValidElement(child)) { if (child.props.props.className.includes("keyword")) { - if (!detailComponentsList.includes[child.props.props.componentname]) return child; + if (!detailComponentsList.includes(child.props.props.componentname)) return child; - return detailsComponent( - child.props.children.slice(4, React.Children.count(child.props.children) - 4), - { url: child.props.props.url } - ); + return
; } if (child.props.props.className.includes("comment")) {