diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6cb97262..b7704938 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -15,21 +15,21 @@ jobs: registry-url: 'https://registry.npmjs.org' - run: npm install - - run: npm run build - - run: npm run doc + - run: npm run build:lib + - run: npm run build:doc - name: Generate Contributors Images uses: jaywcjlove/github-action-contributors@main with: filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\]) - output: build/CONTRIBUTORS.svg + output: www/build/CONTRIBUTORS.svg avatarSize: 42 - name: Create Tag id: create_tag uses: jaywcjlove/create-tag-action@main with: - package-path: ./package.json + package-path: ./core/package.json - name: get tag version id: tag_version @@ -40,7 +40,7 @@ jobs: with: commit_message: ${{steps.tag_version.outputs.tag}} ${{ github.event.head_commit.message }} github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./build + publish_dir: ./www/build - name: Generate Changelog id: changelog @@ -72,32 +72,33 @@ jobs: - name: 📦 @uiw/react-prismjs publish to NPM run: npm publish continue-on-error: true + working-directory: core env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} - outputs: - successful: ${{steps.create_tag.outputs.successful }} - - github-package: - runs-on: ubuntu-latest - needs: build-deploy - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - registry-url: https://npm.pkg.github.com - scope: '@uiwjs' - - - run: npm install - - run: npm run build - - - name: Modify @uiw/react-prismjs => @uiwjs/react-prismjs - uses: jaywcjlove/github-action-package@main - with: - rename: '@uiwjs/react-prismjs' + # outputs: + # successful: ${{steps.create_tag.outputs.successful }} + + # github-package: + # runs-on: ubuntu-latest + # needs: build-deploy + # steps: + # - uses: actions/checkout@v3 + # - uses: actions/setup-node@v3 + # with: + # node-version: 16 + # registry-url: https://npm.pkg.github.com + # scope: '@uiwjs' + + # - run: npm install + # - run: npm run build + + # - name: Modify @uiw/react-prismjs => @uiwjs/react-prismjs + # uses: jaywcjlove/github-action-package@main + # with: + # rename: '@uiwjs/react-prismjs' - - run: npm publish - env: - continue-on-error: true - NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} + # - run: npm publish + # env: + # continue-on-error: true + # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} diff --git a/.lintstagedrc b/.lintstagedrc new file mode 100644 index 00000000..a3e5f8b0 --- /dev/null +++ b/.lintstagedrc @@ -0,0 +1,5 @@ +{ + "*.{js,jsx,tsx,ts,less,md,json}": [ + "prettier --write" + ] +} \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..d6c92aec --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +**/*.md +**/*.svg +**/*.ejs +**/*.html +**/*.yml +package.json +node_modules +dist +build +coverage +lib +esm +test \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..764fbde2 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 120, + "overrides": [ + { + "files": ".prettierrc", + "options": { "parser": "json" } + } + ] +} diff --git a/README.md b/README.md deleted file mode 100644 index 01102644..00000000 --- a/README.md +++ /dev/null @@ -1,80 +0,0 @@ -@uiw/react-prismjs -=== - - -[![Build & Deploy](https://github.com/uiwjs/react-prismjs/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-prismjs/actions/workflows/ci.yml) -[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-prismjs.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-prismjs) -[![npm version](https://img.shields.io/npm/v/@uiw/react-prismjs.svg)](https://www.npmjs.com/package/@uiw/react-prismjs) -[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-prismjs.svg)](https://bundlephobia.com/result?p=@uiw/react-prismjs) - -React Component for [prismjs](https://github.com/PrismJS/prism). The current [document website](https://uiwjs.github.io/react-prismjs/). - -## Install - -```bash -npm i @uiw/react-prismjs -``` - -## Basic Usage - -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/example-uiw-react-prismjs-uj67m?fontsize=14&hidenavigation=1&theme=dark) - -```js -import ReactPrismjs from '@uiw/react-prismjs'; -import 'prismjs/components/prism-java'; - -const Dome = () => ( - -); -``` - -### Theme - -Support [`prismjs`](https://github.com/PrismJS/prism/tree/master/themes) theme setting - -```js -import ReactPrismjs from '@uiw/react-prismjs'; -import 'prismjs/themes/prism-coy.css'; -``` - -### Options Props - -```typescript -interface ReactPrismjsProps { - prefixCls?: string; - language?: string; - source?: string; - className?: string; -} -``` - -- `source` - _string_ The code string source to parse (**required**) -- `language` - _string_ A language id in [`Prism.languages`](https://github.com/PrismJS/prism/blob/388ad996c4b576205de4d4feda69202bd26c1345/components.json). -- `className` - _string_ Class name of the container element. - -## Development - -**development** - -Runs the project in development mode. - -```bash -# listen to the component compile and output the .js file and listen for compilation output type .d.ts file -npm run watch -# development mode, listen to compile preview website instance -npm run doc:dev -``` - -## Contributors - -As always, thanks to our amazing contributors! - - - - - -Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). - -## License - -Licensed under the MIT License. \ No newline at end of file diff --git a/README.md b/README.md new file mode 120000 index 00000000..a79a2132 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +./core/README.md \ No newline at end of file diff --git a/core/README.md b/core/README.md new file mode 100644 index 00000000..be800f0d --- /dev/null +++ b/core/README.md @@ -0,0 +1,106 @@ +@uiw/react-prismjs +=== + + +[![Build & Deploy](https://github.com/uiwjs/react-prismjs/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-prismjs/actions/workflows/ci.yml) +[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-prismjs.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-prismjs) +[![npm version](https://img.shields.io/npm/v/@uiw/react-prismjs.svg)](https://www.npmjs.com/package/@uiw/react-prismjs) +[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-prismjs.svg)](https://bundlephobia.com/result?p=@uiw/react-prismjs) + +React Component for [prismjs](https://github.com/PrismJS/prism). The current [document website](https://uiwjs.github.io/react-prismjs/). + +## Install + +```bash +npm i @uiw/react-prismjs +``` + +## Basic Usage + +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/example-uiw-react-prismjs-uj67m?fontsize=14&hidenavigation=1&theme=dark) + +```jsx mdx:preview?background=#fff +import React from 'react'; +import ReactPrismjs from '@uiw/react-prismjs'; +import 'prismjs/components/prism-java'; + +const JAVAString =`import com.demo.util.MyType; +import com.demo.util.MyInterface; + +public enum Enum { + VAL1, VAL2, VAL3 +} + +public class Class implements MyInterface { + public static final MyType member; + + @Override + public MyType method() { + return member; + } + + public void method2(MyType value) { + method(); + value.method3(); + member = value; + } +} +`; + +export default function Demo() { + return ( + + ) +} +``` + +### Theme + +Support [`prismjs`](https://github.com/PrismJS/prism/tree/master/themes) theme setting + +```js +import ReactPrismjs from '@uiw/react-prismjs'; +import 'prismjs/themes/prism-coy.css'; +``` + +### Options Props + +```typescript +interface ReactPrismjsProps { + prefixCls?: string; + language?: string; + source?: string; + className?: string; +} +``` + +- `source` - _string_ The code string source to parse (**required**) +- `language` - _string_ A language id in [`Prism.languages`](https://github.com/PrismJS/prism/blob/388ad996c4b576205de4d4feda69202bd26c1345/components.json). +- `className` - _string_ Class name of the container element. + +## Development + +**development** + +Runs the project in development mode. + +```bash +# listen to the component compile and output the .js file and listen for compilation output type .d.ts file +npm run watch +# development mode, listen to compile preview website instance +npm run doc:dev +``` + +## Contributors + +As always, thanks to our amazing contributors! + + + + + +Made with [contributors](https://github.com/jaywcjlove/github-action-contributors). + +## License + +Licensed under the MIT License. \ No newline at end of file diff --git a/core/package.json b/core/package.json new file mode 100644 index 00000000..60b91fcb --- /dev/null +++ b/core/package.json @@ -0,0 +1,35 @@ +{ + "name": "@uiw/react-prismjs", + "version": "1.3.6", + "description": "React Component for prismjs.", + "homepage": "https://uiwjs.github.io/react-prismjs/", + "main": "cjs/index.js", + "module": "esm/index.js", + "scripts": { + "css:build": "compile-less -d src -o esm", + "css:watch": "compile-less -d src -o esm --watch", + "css:build:dist": "compile-less -d src --combine dist.css --rm-global", + "watch": "tsbb watch src/*.tsx --use-babel & npm run css:watch", + "build": "tsbb build src/*.tsx --use-babel && npm run css:build && npm run css:build:dist" + }, + "repository": { + "type": "git", + "url": "https://github.com/uiwjs/react-prismjs.git" + }, + "author": "kenny wang ", + "license": "MIT", + "files": [ + "dist.css", + "src", + "cjs", + "esm" + ], + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + }, + "dependencies": { + "@types/prismjs": "~1.26.0", + "prismjs": "~1.29.0" + } +} diff --git a/src/index.tsx b/core/src/index.tsx similarity index 100% rename from src/index.tsx rename to core/src/index.tsx diff --git a/src/style/index.less b/core/src/style/index.less similarity index 100% rename from src/style/index.less rename to core/src/style/index.less diff --git a/core/tsconfig.json b/core/tsconfig.json new file mode 100644 index 00000000..b618fac3 --- /dev/null +++ b/core/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig", + "include": ["src"], + "compilerOptions": { + "baseUrl": "./", + "noEmit": false, + "outDir": "./cjs" + } +} diff --git a/lerna.json b/lerna.json new file mode 100644 index 00000000..16cb705a --- /dev/null +++ b/lerna.json @@ -0,0 +1,4 @@ +{ + "version": "1.3.6", + "packages": ["core", "www"] +} diff --git a/package.json b/package.json index 2f86c424..7de9b2a6 100644 --- a/package.json +++ b/package.json @@ -1,74 +1,34 @@ { - "name": "@uiw/react-prismjs", - "version": "1.3.6", - "description": "React Component for prismjs.", - "homepage": "https://uiwjs.github.io/react-prismjs/", - "main": "cjs/index.js", - "module": "esm/index.js", + "private": true, "scripts": { - "prepare": "npm run build", - "doc": "kkt build --app-src ./website", - "start": "kkt start --app-src ./website", - "css:build": "compile-less -d src -o esm", - "css:watch": "compile-less -d src -o esm --watch", - "css:build:dist": "compile-less -d src --combine dist.css --rm-global", - "watch": "tsbb watch src/*.tsx --use-babel & npm run css:watch", - "build": "tsbb build src/*.tsx --use-babel && npm run css:build && npm run css:build:dist", - "map": "source-map-explorer build/static/js/*.js --html build/website-result.html" - }, - "repository": { - "type": "git", - "url": "https://github.com/uiwjs/react-prismjs.git" - }, - "author": "", - "license": "MIT", - "files": [ - "dist.css", - "src", - "cjs", - "esm" - ], - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - }, - "dependencies": { - "@types/prismjs": "~1.26.0", - "prismjs": "~1.29.0" + "build": "npm run build:lib", + "build:lib": "lerna exec --scope @uiw/* -- npm run build", + "build:doc": "lerna exec --scope website -- npm run build", + "doc": "lerna exec --scope website -- npm run start", + "start": "lerna exec --scope @uiw/* -- npm run watch", + "prepare": "npm run build && husky install", + "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", + "version": "lerna version --no-changelog --no-git-tag-version --no-push" }, "devDependencies": { - "@types/react": "^18.0.14", - "@types/react-dom": "^18.0.5", - "@kkt/less-modules": "^7.2.0", - "@kkt/raw-modules": "^7.2.0", - "@kkt/scope-plugin-options": "^7.2.0", - "@uiw/react-github-corners": "^1.5.14", - "@uiw/react-markdown-preview": "^4.0.21", - "@wcj/dark-mode": "^1.0.14", - "compile-less-cli": "^1.8.13", - "kkt": "^7.2.0", - "markdown-react-code-preview-loader": "^2.1.2", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "source-map-explorer": "^2.5.3", - "tsbb": "^4.1.4" + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", + "@types/react-test-renderer": "^18.0.0", + "@kkt/ncc": "^1.0.15", + "compile-less-cli": "^1.8.14", + "husky": "^8.0.3", + "prettier": "^3.0.0", + "lerna": "^7.1.4", + "tsbb": "^4.1.14" }, "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] + "extends": "react-app" + }, + "engines": { + "node": ">=16.0.0" }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } + "workspaces": [ + "core", + "www" + ] } diff --git a/src/tsconfig.json b/src/tsconfig.json deleted file mode 100644 index 8a55f0f5..00000000 --- a/src/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "../tsconfig", - "include": ["../src"], - "compilerOptions": { - "baseUrl": ".", - "emitDeclarationOnly": true, - "noEmit": false - } -} diff --git a/tsconfig.json b/tsconfig.json index 433db99b..63885630 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -17,12 +13,8 @@ "resolveJsonModule": true, "isolatedModules": true, "declaration": true, - "baseUrl": "website", "jsx": "react-jsx", - "outDir": "./cjs", - "noFallthroughCasesInSwitch": true - }, - "include": [ - "src" - ] + "noFallthroughCasesInSwitch": true, + "noEmit": true + } } diff --git a/website/App.css b/website/App.css deleted file mode 100644 index c5d5f633..00000000 --- a/website/App.css +++ /dev/null @@ -1,35 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background-color: #282c34; -} - -.App-logo { - max-height: 240px; -} - -.App-header { - min-height: calc(100vh - 50px); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); -} - -.info { - background-color: #fff; - border-radius: 10px; - max-width: 800px; - margin: 0 auto; - margin-bottom: 60px; -} - -.App-markdown { - padding: 20px 20px; -} \ No newline at end of file diff --git a/website/App.tsx b/website/App.tsx deleted file mode 100644 index 9e6aa229..00000000 --- a/website/App.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useState } from 'react'; -import MarkdownPreview from '@uiw/react-markdown-preview'; -import GitHubCorners from '@uiw/react-github-corners'; -import '@wcj/dark-mode'; -import logo from './logo.svg'; -import ReactPrismjs from '../'; -import 'prismjs/components/prism-java'; -import MDStr from '../README.md'; -import './App.css'; - -const codeJSString = `import React from 'react'; -import styles from './index.less'; - -const Select = ({ value, options, onChange }) => { - return ( - - ); -}; - -export default Select; -`; - -const codeJAVAString =`import com.demo.util.MyType; -import com.demo.util.MyInterface; - -public enum Enum { - VAL1, VAL2, VAL3 -} - -public class Class implements MyInterface { - public static final MyType member; - - private class InnerClass { - public int zero() { - return 0; - } - } - - @Override - public MyType method() { - return member; - } - - public void method2(MyType value) { - method(); - value.method3(); - member = value; - } -} -`; - -const APP = () => { - const [lang, setLang] = useState('javascript'); - const [code, setCode] = useState(codeJSString); - return ( -
- - -
- logo -

- React Component for Prismjs. -

-
- - -
-
-
- -
-
- -
-
- ); -} - -export default APP; diff --git a/website/index.tsx b/website/index.tsx deleted file mode 100644 index b0979507..00000000 --- a/website/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import App from './App' -import { createRoot } from 'react-dom/client'; - -const container = document.getElementById('root'); -const root = createRoot(container!); -root.render(); \ No newline at end of file diff --git a/website/logo.svg b/website/logo.svg deleted file mode 100644 index 3f454ebc..00000000 --- a/website/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/website/serviceWorker.ts b/website/serviceWorker.ts deleted file mode 100644 index 15d90cb8..00000000 --- a/website/serviceWorker.ts +++ /dev/null @@ -1,143 +0,0 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -type Config = { - onSuccess?: (registration: ServiceWorkerRegistration) => void; - onUpdate?: (registration: ServiceWorkerRegistration) => void; -}; - -export function register(config?: Config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL( - (process as { env: { [key: string]: string } }).env.PUBLIC_URL, - window.location.href - ); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl: string, config?: Config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl: string, config?: Config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } -} diff --git a/website/tsconfig.json b/website/tsconfig.json deleted file mode 100644 index ec175df6..00000000 --- a/website/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "../tsconfig", - "include": ["../src", "./"], - "compilerOptions": { - "baseUrl": ".", - "emitDeclarationOnly": true, - "noEmit": false - } -} diff --git a/.kktrc.ts b/www/.kktrc.ts similarity index 79% rename from .kktrc.ts rename to www/.kktrc.ts index 0ebbe9f1..7b1f8318 100644 --- a/.kktrc.ts +++ b/www/.kktrc.ts @@ -1,18 +1,18 @@ -import webpack, { Configuration } from 'webpack'; -import { LoaderConfOptions } from 'kkt'; -import lessModules from '@kkt/less-modules'; -import { disableScopePlugin } from '@kkt/scope-plugin-options'; +import webpack from 'webpack'; +import { LoaderConfOptions, WebpackConfiguration } from 'kkt'; import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader'; -import pkg from './package.json'; +import { disableScopePlugin } from '@kkt/scope-plugin-options'; +import pkg from '@uiw/react-prismjs/package.json'; -export default (conf: Configuration, env: string, options: LoaderConfOptions) => { +export default (conf: WebpackConfiguration, env: string, options: LoaderConfOptions) => { conf = mdCodeModulesLoader(conf); conf = disableScopePlugin(conf); - conf = lessModules(conf, env, options); // Get the project version. conf.plugins!.push(new webpack.DefinePlugin({ VERSION: JSON.stringify(pkg.version), })); + // https://github.com/kktjs/kkt/issues/336#issue-1097660932 + conf.module!.exprContextCritical = false; if (env === 'production') { conf.output = { ...conf.output, publicPath: './' }; conf.optimization = { diff --git a/www/package.json b/www/package.json new file mode 100644 index 00000000..11ea165b --- /dev/null +++ b/www/package.json @@ -0,0 +1,52 @@ +{ + "name": "website", + "version": "1.3.6", + "private": true, + "scripts": { + "build": "kkt build", + "start": "kkt start" + }, + "license": "MIT", + "files": [ + "dist.css", + "src", + "cjs", + "esm" + ], + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + }, + "dependencies": { + "@uiw/react-markdown-preview-example": "^1.5.5", + "@uiw/react-shields": "^1.1.3", + "@uiw/react-prismjs": "1.3.6", + "react": "~18.2.0", + "react-dom": "~18.2.0", + "react-router-dom": "^6.8.1" + }, + "devDependencies": { + "@kkt/scope-plugin-options": "^7.5.2", + "kkt": "^7.5.2", + "markdown-react-code-preview-loader": "^2.1.5", + "react-test-renderer": "^18.2.0" + }, + "eslintConfig": { + "extends": "react-app" + }, + "engines": { + "node": ">=16.0.0" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/favicon.ico b/www/public/favicon.ico similarity index 100% rename from public/favicon.ico rename to www/public/favicon.ico diff --git a/public/index.html b/www/public/index.html similarity index 100% rename from public/index.html rename to www/public/index.html diff --git a/www/src/App.tsx b/www/src/App.tsx new file mode 100644 index 00000000..9828127b --- /dev/null +++ b/www/src/App.tsx @@ -0,0 +1,80 @@ +import { useState } from 'react'; +import ReactPrismjs from '@uiw/react-prismjs'; +import 'prismjs/components/prism-java'; +import styled from 'styled-components'; + +const codeJSString = `import React from 'react'; +import styles from './index.less'; + +const Select = ({ value, options, onChange }) => { + return ( + + ); +}; + +export default Select; +`; + +const codeJAVAString =`import com.demo.util.MyType; +import com.demo.util.MyInterface; + +public enum Enum { + VAL1, VAL2, VAL3 +} + +public class Class implements MyInterface { + public static final MyType member; + + @Override + public MyType method() { + return member; + } + + public void method2(MyType value) { + method(); + value.method3(); + member = value; + } +} +`; + +const Wrapper = styled.div` + width: 100%; + font-size: 21px; +`; + +const APP = () => { + const [lang, setLang] = useState('javascript'); + const [code, setCode] = useState(codeJSString); + return ( + +
+ + +
+ + + ); +} + +export default APP; diff --git a/www/src/index.tsx b/www/src/index.tsx new file mode 100644 index 00000000..a703247a --- /dev/null +++ b/www/src/index.tsx @@ -0,0 +1,26 @@ +import { createRoot } from 'react-dom/client'; +import MarkdownPreviewExample from '@uiw/react-markdown-preview-example'; +import data from '@uiw/react-prismjs/README.md'; +import Example from './App'; + +const container = document.getElementById('root'); +const root = createRoot(container!); +root.render( + + React Prismjs + + } + description="React Component for Prismjs." + version={`v${VERSION}`} + > + + + + + , +); diff --git a/website/react-app-env.d.ts b/www/src/react-app-env.d.ts similarity index 62% rename from website/react-app-env.d.ts rename to www/src/react-app-env.d.ts index 10a7af05..5ebd9ad3 100644 --- a/website/react-app-env.d.ts +++ b/www/src/react-app-env.d.ts @@ -1,9 +1,6 @@ /// -declare module '*.module.less' { - const classes: { readonly [key: string]: string }; - export default classes; -} +declare var VERSION: string; declare module '*.md' { import { CodeBlockData } from 'markdown-react-code-preview-loader'; diff --git a/www/tsconfig.json b/www/tsconfig.json new file mode 100644 index 00000000..895c5e36 --- /dev/null +++ b/www/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../tsconfig", + "include": ["src", "./.kktrc.ts"], + "compilerOptions": { + "baseUrl": "./" + } +}