forked from SunLxy/md-loader
-
Notifications
You must be signed in to change notification settings - Fork 0
/
583.2c6ac73c.chunk.js.map
1 lines (1 loc) · 6.73 KB
/
583.2c6ac73c.chunk.js.map
1
{"version":3,"file":"static/js/583.2c6ac73c.chunk.js","mappings":"8GAII,WACEA,OAAO,8oMACPC,WAHY,GAIZC,UALW,GAMXC,UAPe","sources":["../../core/README.md"],"sourcesContent":["\n const languages={};\n const codeBlock={};\n const components={}\n export default {\n source:\"markdown-react-code-preview-loader\\n===\\n\\n[](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml)\\n[](https://www.npmjs.com/package/markdown-react-code-preview-loader)\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/markdown-react-code-preview-loader/file/README.md)\\n\\nIndex example text in Markdown, converted to React components. The current package is the `loader` of `webpack`, which loads the `markdown` document by configuring the current `loader`, returning a `JS` object containing the `markdown` text, the example index in the `markdown` text.\\n\\n## Install Loader\\n\\n```bash\\nnpm i markdown-react-code-preview-loader -D\\n```\\n\\n## Configure Loader\\n\\nAfter installing the dependency (loader), we need to configure the `loader` into the `webpack` configuration. Learn how to use the configuration `loader` by using two configuration methods in `kkt`.\\n\\n**① The first method, use the mdCodeModulesLoader method**\\n\\n`mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\\n\\n```ts\\n// .kktrc.ts\\nimport scopePluginOptions from '@kkt/scope-plugin-options';\\nimport { LoaderConfOptions, WebpackConfiguration } from 'kkt';\\nimport { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';\\n\\nexport default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {\\n // ....\\n conf = mdCodeModulesLoader(conf);\\n // ....\\n return conf;\\n};\\n```\\n\\n```ts\\nimport webpack from 'webpack';\\nimport { Options } from 'markdown-react-code-preview-loader';\\n/**\\n * `mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\\n * @param {webpack.Configuration} config webpack config\\n * @param {string[]} lang Parsing language\\n * @param {Options} option Loader Options\\n * @returns {webpack.Configuration}\\n * **/\\nexport declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;\\n```\\n\\n**② The second method is to manually add the configuration**\\n\\nThe configuration and usage methods are consistent in Webpack.\\n\\n```ts\\n// .kktrc.ts\\nimport webpack, { Configuration } from 'webpack';\\nimport scopePluginOptions from '@kkt/scope-plugin-options';\\nimport { LoaderConfOptions } from 'kkt';\\n\\nexport default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {\\n // ....\\n config.module.rules.forEach((ruleItem) => {\\n if (typeof ruleItem === 'object') {\\n if (ruleItem.oneOf) {\\n ruleItem.oneOf.unshift({\\n test: /.md$/,\\n use: [\\n {\\n loader: 'markdown-react-code-preview-loader',\\n options: { lang:[\\\"jsx\\\",\\\"tsx\\\"] },\\n },\\n ],\\n });\\n }\\n }\\n });\\n // ....\\n return conf;\\n};\\n```\\n\\n### options parameter\\n\\n```ts\\nimport { PluginItem } from '@babel/core';\\nimport { Options as RIOptions } from 'babel-plugin-transform-remove-imports'\\nexport type Options = {\\n /**\\n * Language to parse code blocks, default: `[\\\"jsx\\\",\\\"tsx\\\"]`\\n */\\n lang?: string[];\\n /**\\n * Option settings for the babel (babel-plugin-transform-remove-imports) package\\n * https://github.com/uiwjs/babel-plugin-transform-remove-imports\\n */\\n removeImports?: RIOptions;\\n /**\\n * Add babel plugins.\\n */\\n babelPlugins?: PluginItem[];\\n}\\n```\\n\\n## Used in the project\\n\\nAfter adding `loader`, use the method to load `markdown` text in the project project:\\n\\n```jsx\\nimport mdObj from 'markdown-react-code-preview-loader/README.md';\\n\\nmdObj.source // => `README.md` raw string text\\nmdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)\\nmdObj.codeBlock // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)\\n```\\n\\n```js\\n{\\n codeBlock: {\\n 17: 'import React from ...',\\n 77: 'import React from ...',\\n demo12: 'import React from ...'\\n },\\n components: { 17: ƒ, 77: ƒ, demo12: ƒ },\\n languages: { 17: 'jsx', 77: 'jsx', demo12: 'jsx'},\\n source: \\\"# Alert 确认对话框....\\\"\\n}\\n```\\n\\n```ts\\nexport type CodeBlockData = {\\n source: string;\\n components: Record<string | number, React.FC>;\\n codeBlock: Record<string | number, string>;\\n languages: Record<string | number, string>;\\n};\\n```\\n\\n## getCodeBlockString \\n\\nPass the `markdown` file content string, and return the converted code block parsing data that needs to be previewed.\\n\\n## Configure meta ID\\n\\nNote ⚠️: You need to add a special `meta` identifier to the code block example, and `loader` will index the `react` example for code conversion.\\n\\n1. `mdx:` special identifier prefix\\n2. `mdx:preview` Controls whether to perform example indexing, and obtain the required example object through the corresponding line number.\\n3. `mdx:preview:demo12` Uniquely identified by `demo12`, accurately obtain the `example code` or `example component object` of the index.\\n\\n```markdown\\n\\\\```tsx mdx:preview\\nimport React from \\\"react\\\"\\nconst Demo = ()=>{\\n return <div>测试</div>\\n}\\n\\nexport default Demo\\n\\\\```\\n```\\n\\n```markdown\\n\\\\```tsx mdx:preview:demo12\\nimport React from \\\"react\\\"\\nconst Demo = ()=>{\\n return <div>测试</div>\\n}\\n\\nexport default Demo\\n\\\\```\\n```\\n\\n## Development\\n\\n```bash\\nnpm install # Install dependencies\\nnpm run hoist # Install sub packages dependencies\\n\\nnpm run watch:loader\\nnpm run start\\n```\\n\\n## Contributors\\n\\nAs always, thanks to our amazing contributors!\\n\\n<a href=\\\"https://github.com/kktjs/markdown-react-code-preview-loader/graphs/contributors\\\">\\n <img src=\\\"https://kktjs.github.io/markdown-react-code-preview-loader/CONTRIBUTORS.svg\\\" />\\n</a>\\n\\nMade with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).\\n\\n### License\\n\\nLicensed under the MIT License.\",\n components,\n codeBlock,\n languages\n }\n"],"names":["source","components","codeBlock","languages"],"sourceRoot":""}