From 3605d6dc9aa22368bab35e7440248328951d89bb Mon Sep 17 00:00:00 2001 From: Sergey Melyukov Date: Thu, 28 Nov 2019 20:39:35 +0300 Subject: [PATCH] add yaml and json5 to custom-json-modules example --- examples/custom-json-modules/README.md | 157 +++++++++++++++--- examples/custom-json-modules/data.json | 11 ++ examples/custom-json-modules/data.yaml | 8 + examples/custom-json-modules/example.js | 8 +- examples/custom-json-modules/template.md | 12 ++ .../custom-json-modules/webpack.config.js | 20 +++ package.json | 4 +- yarn.lock | 12 +- 8 files changed, 206 insertions(+), 26 deletions(-) create mode 100644 examples/custom-json-modules/data.json create mode 100644 examples/custom-json-modules/data.yaml diff --git a/examples/custom-json-modules/README.md b/examples/custom-json-modules/README.md index fea352407..f6a83b537 100644 --- a/examples/custom-json-modules/README.md +++ b/examples/custom-json-modules/README.md @@ -14,24 +14,57 @@ bio = "GitHub Cofounder & CEO\nLikes tater tots and beer." dob = 1979-05-27T07:32:00Z ``` +# data.yaml + +```yaml +title: TOML Example +owner: + name: Tom Preston-Werner + organization: GitHub + bio: |- + GitHub Cofounder & CEO + Likes tater tots and beer. + dob: 1979-05-27T07:32:00.000Z +``` + +# data.json + +```json5 +{ + // comment + title: "TOML Example", + owner: { + name: "Tom Preston-Werner", + organization: "GitHub", + bio: "GitHub Cofounder & CEO\n\ +Likes tater tots and beer.", + dob: "1979-05-27T07:32:00.000Z" + } +} +``` + # example.js ```javascript -import data from "./data.toml"; +import toml from "./data.toml"; +import yaml from "./data.yaml"; +import json from "./data.json"; -document.querySelector('#app').innerHTML = ` +document.querySelector('#app').innerHTML = [toml, yaml, json].map(data => `

${data.title}

${data.owner.name}
${data.owner.organization}
${data.owner.bio}
${data.owner.dob}
-`; +`).join('

'); ``` # webpack.config.js ```javascript const toml = require("toml"); +const json5 = require('json5'); +const yaml = require('yamljs'); module.exports = { module: { @@ -44,6 +77,24 @@ module.exports = { return toml.parse(input); } } + }, + { + test: /\.json$/, + type: "json", + parser: { + parse(input) { + return json5.parse(input); + } + } + }, + { + test: /\.yaml$/, + type: "json", + parser: { + parse(input) { + return yaml.parse(input); + } + } } ] } @@ -66,15 +117,19 @@ module.exports = { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _data_toml__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./data.toml */ 1); +/* harmony import */ var _data_yaml__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./data.yaml */ 2); +/* harmony import */ var _data_json__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./data.json */ 3); -document.querySelector('#app').innerHTML = ` -

${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.title */ .title}

-
${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.owner.name */ .owner.name}
-
${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.owner.organization */ .owner.organization}
-
${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.owner.bio */ .owner.bio}
-
${_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default.owner.dob */ .owner.dob}
-`; + + +document.querySelector('#app').innerHTML = [_data_toml__WEBPACK_IMPORTED_MODULE_0__/* .default */ , _data_yaml__WEBPACK_IMPORTED_MODULE_1__/* .default */ , _data_json__WEBPACK_IMPORTED_MODULE_2__/* .default */ ].map(data => ` +

${data.title}

+
${data.owner.name}
+
${data.owner.organization}
+
${data.owner.bio}
+
${data.owner.dob}
+`).join('

'); /***/ }), @@ -106,6 +161,62 @@ document.querySelector('#app').innerHTML = ` module.exports = JSON.parse("{\"title\":\"TOML Example\",\"owner\":{\"name\":\"Tom Preston-Werner\",\"organization\":\"GitHub\",\"bio\":\"GitHub Cofounder & CEO\\nLikes tater tots and beer.\",\"dob\":\"1979-05-27T07:32:00.000Z\"}}"); +/***/ }), +/* 2 */ +/*!*******************!*\ + !*** ./data.yaml ***! + \*******************/ +/*! export default [provided] [no usage info] [no name, virtual] */ +/*! export owner [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export bio [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export dob [provided] [no usage info] [missing usage info prevents renaming] */ +/*! exports [not provided] [no usage info] */ +/*! export name [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export organization [provided] [no usage info] [missing usage info prevents renaming] */ +/*! other exports [not provided] [no usage info] */ +/*! export title [provided] [no usage info] [missing usage info prevents renaming] */ +/*! other exports [not provided] [no usage info] */ +/*! export owner [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export bio [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export dob [provided] [no usage info] [missing usage info prevents renaming] */ +/*! exports [not provided] [no usage info] */ +/*! export name [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export organization [provided] [no usage info] [missing usage info prevents renaming] */ +/*! other exports [not provided] [no usage info] */ +/*! export title [provided] [no usage info] [missing usage info prevents renaming] */ +/*! other exports [not provided] [no usage info] */ +/*! runtime requirements: module */ +/***/ ((module) => { + +module.exports = JSON.parse("{\"title\":\"TOML Example\",\"owner\":{\"name\":\"Tom Preston-Werner\",\"organization\":\"GitHub\",\"bio\":\"GitHub Cofounder & CEO\\nLikes tater tots and beer.\",\"dob\":\"1979-05-27T07:32:00.000Z\"}}"); + +/***/ }), +/* 3 */ +/*!*******************!*\ + !*** ./data.json ***! + \*******************/ +/*! export default [provided] [no usage info] [no name, virtual] */ +/*! export owner [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export bio [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export dob [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export name [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export organization [provided] [no usage info] [missing usage info prevents renaming] */ +/*! other exports [not provided] [no usage info] */ +/*! export title [provided] [no usage info] [missing usage info prevents renaming] */ +/*! other exports [not provided] [no usage info] */ +/*! export owner [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export bio [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export dob [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export name [provided] [no usage info] [missing usage info prevents renaming] */ +/*! export organization [provided] [no usage info] [missing usage info prevents renaming] */ +/*! other exports [not provided] [no usage info] */ +/*! export title [provided] [no usage info] [missing usage info prevents renaming] */ +/*! other exports [not provided] [no usage info] */ +/*! runtime requirements: module */ +/***/ ((module) => { + +module.exports = JSON.parse("{\"title\":\"TOML Example\",\"owner\":{\"name\":\"Tom Preston-Werner\",\"organization\":\"GitHub\",\"bio\":\"GitHub Cofounder & CEO\\nLikes tater tots and beer.\",\"dob\":\"1979-05-27T07:32:00.000Z\"}}"); + /***/ }) /******/ ]); ``` @@ -171,24 +282,30 @@ module.exports = JSON.parse("{\"title\":\"TOML Example\",\"owner\":{\"name\":\"T ## webpack output ``` -Hash: 05de32641bf6fbad9390 +Hash: 8f69e0ad2f96aaaa29ec Version: webpack 5.0.0-beta.7 -Time: 145ms +Time: 123ms Asset Size -output.js 4.57 KiB [emitted] [name: main] +output.js 8.17 KiB [emitted] [name: main] Entrypoint main = output.js -chunk output.js (main) 428 bytes (javascript) 274 bytes (runtime) [entry] [rendered] +chunk output.js (main) 917 bytes (javascript) 274 bytes (runtime) [entry] [rendered] > ./example.js  main + ./data.json 188 bytes [built] + [exports: default, owner, title] + [used exports unknown] + harmony side effect evaluation ./data.json ./example.js 3:0-31  + harmony import specifier ./data.json ./example.js 5:56-60  ./data.toml 188 bytes [built] [exports: default, owner, title] [used exports unknown] harmony side effect evaluation ./data.toml ./example.js 1:0-31  - harmony import specifier ./data.toml ./example.js 4:8-18  - harmony import specifier ./data.toml ./example.js 5:9-24  - harmony import specifier ./data.toml ./example.js 6:9-32  - harmony import specifier ./data.toml ./example.js 7:9-23  - harmony import specifier ./data.toml ./example.js 8:9-23  - ./example.js 240 bytes [built] + harmony import specifier ./data.toml ./example.js 5:44-48  + ./data.yaml 188 bytes [built] + [exports: default, owner, title] + [used exports unknown] + harmony side effect evaluation ./data.yaml ./example.js 2:0-31  + harmony import specifier ./data.yaml ./example.js 5:50-54  + ./example.js 353 bytes [built] [no exports] [used exports unknown] entry ./example.js null main  diff --git a/examples/custom-json-modules/data.json b/examples/custom-json-modules/data.json new file mode 100644 index 000000000..4b5f9a609 --- /dev/null +++ b/examples/custom-json-modules/data.json @@ -0,0 +1,11 @@ +{ + // comment + title: "TOML Example", + owner: { + name: "Tom Preston-Werner", + organization: "GitHub", + bio: "GitHub Cofounder & CEO\n\ +Likes tater tots and beer.", + dob: "1979-05-27T07:32:00.000Z" + } +} diff --git a/examples/custom-json-modules/data.yaml b/examples/custom-json-modules/data.yaml new file mode 100644 index 000000000..1e089e3c1 --- /dev/null +++ b/examples/custom-json-modules/data.yaml @@ -0,0 +1,8 @@ +title: TOML Example +owner: + name: Tom Preston-Werner + organization: GitHub + bio: |- + GitHub Cofounder & CEO + Likes tater tots and beer. + dob: 1979-05-27T07:32:00.000Z diff --git a/examples/custom-json-modules/example.js b/examples/custom-json-modules/example.js index 39f477698..e94675e2b 100644 --- a/examples/custom-json-modules/example.js +++ b/examples/custom-json-modules/example.js @@ -1,9 +1,11 @@ -import data from "./data.toml"; +import toml from "./data.toml"; +import yaml from "./data.yaml"; +import json from "./data.json"; -document.querySelector('#app').innerHTML = ` +document.querySelector('#app').innerHTML = [toml, yaml, json].map(data => `

${data.title}

${data.owner.name}
${data.owner.organization}
${data.owner.bio}
${data.owner.dob}
-`; +`).join('

'); diff --git a/examples/custom-json-modules/template.md b/examples/custom-json-modules/template.md index 295f38bd8..207205caa 100644 --- a/examples/custom-json-modules/template.md +++ b/examples/custom-json-modules/template.md @@ -8,6 +8,18 @@ Toml files can be imported like other modules without toml-loader. _{{data.toml}}_ ``` +# data.yaml + +```yaml +_{{data.yaml}}_ +``` + +# data.json + +```json5 +_{{data.json}}_ +``` + # example.js ```javascript diff --git a/examples/custom-json-modules/webpack.config.js b/examples/custom-json-modules/webpack.config.js index f89419906..52a65273c 100644 --- a/examples/custom-json-modules/webpack.config.js +++ b/examples/custom-json-modules/webpack.config.js @@ -1,4 +1,6 @@ const toml = require("toml"); +const json5 = require('json5'); +const yaml = require('yamljs'); module.exports = { module: { @@ -11,6 +13,24 @@ module.exports = { return toml.parse(input); } } + }, + { + test: /\.json$/, + type: "json", + parser: { + parse(input) { + return json5.parse(input); + } + } + }, + { + test: /\.yaml$/, + type: "json", + parser: { + parse(input) { + return yaml.parse(input); + } + } } ] } diff --git a/package.json b/package.json index 0ee603321..f38e16ecb 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "jest-junit": "^8.0.0", "json-loader": "^0.5.7", "json-schema-to-typescript": "^7.0.0", + "json5": "^2.1.1", "less": "^3.9.0", "less-loader": "^5.0.0", "lint-staged": "^9.2.1", @@ -83,7 +84,8 @@ "url-loader": "^2.1.0", "wast-loader": "^1.5.5", "worker-loader": "^2.0.0", - "xxhashjs": "^0.2.1" + "xxhashjs": "^0.2.1", + "yamljs": "^0.3.0" }, "engines": { "node": ">=10.13.0" diff --git a/yarn.lock b/yarn.lock index a5f65f7df..f1200a926 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2554,7 +2554,7 @@ glob@^5.0.15: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: +glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: version "7.1.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== @@ -3693,7 +3693,7 @@ json5@^1.0.1: dependencies: minimist "^1.2.0" -json5@^2.1.0: +json5@^2.1.0, json5@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6" integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ== @@ -6651,6 +6651,14 @@ yallist@^4.0.0: resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== +yamljs@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/yamljs/-/yamljs-0.3.0.tgz#dc060bf267447b39f7304e9b2bfbe8b5a7ddb03b" + integrity sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ== + dependencies: + argparse "^1.0.7" + glob "^7.0.5" + yargs-parser@^10.0.0: version "10.1.0" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"