From 17e6f9f017968f756b43a481a9d16208e66e884a Mon Sep 17 00:00:00 2001 From: Charlie Brown Date: Thu, 11 Apr 2024 14:08:52 -0500 Subject: [PATCH 1/2] Update readme and cleanup build tooling --- .github/actions/setup/action.yml | 23 +++++ .github/workflows/release.yml | 22 +---- .github/workflows/static-analysis.yml | 31 +++---- .github/workflows/unit-test.yml | 42 --------- LICENSE | 2 +- README.md | 95 ++++++++++++++++---- packages/demo/index.html | 4 +- packages/demo/public/formidable-icon.svg | 37 -------- packages/demo/public/formidable-wordmark.svg | 54 ----------- packages/demo/public/nearform-icon.svg | 4 + packages/demo/public/nearform-logo-white.svg | 4 + packages/demo/src/App.tsx | 6 +- packages/demo/src/app.module.css | 4 +- packages/demo/src/sample-code.ts | 4 +- packages/generate-prism-languages/index.ts | 2 +- 15 files changed, 132 insertions(+), 202 deletions(-) create mode 100644 .github/actions/setup/action.yml delete mode 100644 .github/workflows/unit-test.yml delete mode 100644 packages/demo/public/formidable-icon.svg delete mode 100644 packages/demo/public/formidable-wordmark.svg create mode 100644 packages/demo/public/nearform-icon.svg create mode 100644 packages/demo/public/nearform-logo-white.svg diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml new file mode 100644 index 0000000..058e21e --- /dev/null +++ b/.github/actions/setup/action.yml @@ -0,0 +1,23 @@ +name: Setup +description: Setup Build Step +inputs: + node-version: + required: true + default: '18.x' + +runs: + using: "composite" + steps: + - uses: pnpm/action-setup@v3 + with: + version: 8.2.0 + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ inputs.node-version }} + cache: 'pnpm' + + - name: Install dependencies + shell: bash + run: pnpm install diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 353a1dd..9148a71 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,4 +1,4 @@ -name: Prism React Renderer Release Workflow +name: Release Workflow on: push: @@ -19,25 +19,7 @@ jobs: steps: - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: 18 - - - uses: pnpm/action-setup@v3 - with: - version: 8.2.0 - - name: Get pnpm store directory - id: pnpm-cache - shell: bash - run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup pnpm cache - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: ${{ runner.os }}-pnpm-store- - - name: Install dependencies - run: pnpm install + - uses: ./.github/actions/setup - name: Build packages run: pnpm run build diff --git a/.github/workflows/static-analysis.yml b/.github/workflows/static-analysis.yml index e4d5139..cc8179b 100644 --- a/.github/workflows/static-analysis.yml +++ b/.github/workflows/static-analysis.yml @@ -5,7 +5,8 @@ on: branches: - master pull_request: - workflow_dispatch: + branches: + - master jobs: static-analysis: @@ -14,29 +15,19 @@ jobs: steps: - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: 18 - - - uses: pnpm/action-setup@v3 - with: - version: 8.2.0 - - name: Get pnpm store directory - id: pnpm-cache - shell: bash - run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup pnpm cache - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: ${{ runner.os }}-pnpm-store- - - name: Install dependencies - run: pnpm install + - uses: ./.github/actions/setup - name: Build library run: pnpm run build + - name: Type Check run: pnpm run typecheck + - name: Lint run: pnpm run lint + + - name: Generate language definitions + run: pnpm run build:languages + + - name: Unit Test + run: pnpm run test diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml deleted file mode 100644 index 55a7776..0000000 --- a/.github/workflows/unit-test.yml +++ /dev/null @@ -1,42 +0,0 @@ -name: Unit Test - -on: - push: - branches: - - master - pull_request: - workflow_dispatch: - -jobs: - matrix: - name: 'Node 18' - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: 18 - - - uses: pnpm/action-setup@v3 - with: - version: 8.2.0 - - name: Get pnpm store directory - id: pnpm-cache - shell: bash - run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - uses: actions/cache@v4 - name: Setup pnpm cache - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: ${{ runner.os }}-pnpm-store- - - name: Install dependencies - run: pnpm install - - - name: Generate language definitions - run: pnpm run build:languages - - - name: Unit Test - run: pnpm run test - diff --git a/LICENSE b/LICENSE index 0d5e37e..8915d38 100755 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018 Formidable +Copyright (c) 2018 Nearform Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 6b82f49..c03f2af 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,26 @@ - - Prism React Renderer — Formidable, We build the modern web + + Prism React Renderer

- A lean Prism highlighter component for React
- Comes with everything to render Prismjs highlighted code directly to React (Native) elements, global-pollution-free! + A lean Prism highlighter component for React

-[![Maintenance Status][maintenance-image]](#maintenance-status) -## Why? +

+ + + + Maintenance Status + +

-Maybe you need to render some extra UI with your Prismjs-highlighted code, -or maybe you'd like to manipulate what Prism renders completely, -or maybe you're just using Prism with React and are searching for an easier, -global-pollution-free way? +

+ Comes with everything to render Prismjs syntax highlighted code directly in React & React Native! +

-Then you're right where you want to be! +## Introduction -## How? +Prism React Renderer powers syntax highlighting in the amazing [Docusaurus](https://docusaurus.io/) framework and many others. This library tokenises code using Prism and provides a small render-props-driven component to quickly render it out into React. This is why it even works with @@ -58,6 +61,7 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_ - [`normalizeTokens`](#normalizetokens) - [`useTokenize`](#usetokenize) - [Theming](#theming) +- [Upgrading from v1 to v2](#upgrade) - [LICENSE](#license) - [Maintenance Status](#maintenance-status) @@ -121,14 +125,18 @@ export const App = () => ( ) -ReactDOM.createRoot(document.getElementById("root") as HTMLElement) - .render() - +ReactDOM + .createRoot(document.getElementById("root") as HTMLElement) + .render() ``` ### Custom Language Support -By default `prism-react-renderer` only includes a [base set of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/c914fdea48625ba59c8022174bb3df1ed802ce4d/packages/generate-prism-languages/index.ts#L9-L23) that Prism supports. **Depending on your app's build system you may need to `await` the `import` or use `require` to ensure `window.Prism` exists before importing the custom languages.** You can add support for more by including their definitions from the main `prismjs` package: +By default `prism-react-renderer` only includes a [base set of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/c914fdea48625ba59c8022174bb3df1ed802ce4d/packages/generate-prism-languages/index.ts#L9-L23) that Prism supports. + +> _Note_: Some languages (such as Javascript) are part of the bundle of other languages + +**Depending on your app's build system you may need to `await` the `import` or use `require` to ensure `window.Prism` exists before importing the custom languages.** You can add support for more by including their definitions from the main `prismjs` package: ```js import { Highlight, Prism } from "prism-react-renderer"; @@ -360,13 +368,64 @@ property limits styles to highlighted languages. When converting a Prism CSS theme it's mostly just necessary to use classes as `types` and convert the declarations to object-style-syntax and put them on `style`. +## Upgrade + +If you are migrating from v1.x to v2.x, follow these steps + +### Change module imports + +```diff +- import Highlight, { defaultProps } from "prism-react-renderer"; ++ import { Highlight } from "prism-react-renderer" + +const Content = ( +- ++ +``` + +### Change theme imports + +```diff +- const theme = require('prism-react-renderer/themes/github') ++ const theme = require('prism-react-renderer').themes.github +``` + +### Check language support + +> By default prism-react-renderer only includes a base set of languages that Prism supports. Depending on your app's build system you may need to await the import or use require to ensure window.Prism exists before importing the custom languages. + +See: https://github.com/FormidableLabs/prism-react-renderer#custom-language-support + +Install prismjs (if not available yet): + +``` +# npm +npm install --save prismjs +# yarn +yarn add prismjs +# pnpm +pnpm add prismjs +``` + +### Add language component + +If the language is not already bundled in the above, you can add additional languages with the following code: + +``` +import { Highlight, Prism } from "prism-react-renderer"; + +(typeof global !== "undefined" ? global : window).Prism = Prism +await import("prismjs/components/prism-applescript") +/** or **/ +require("prismjs/components/prism-applescript") +``` + ## LICENSE MIT ## Maintenance Status -**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome. +**Active:** Nearform is actively working on this project, and we expect to continue work for the foreseeable future. Bug reports, feature requests and pull requests are welcome. [maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg - diff --git a/packages/demo/index.html b/packages/demo/index.html index d42d119..c20c08d 100644 --- a/packages/demo/index.html +++ b/packages/demo/index.html @@ -2,10 +2,10 @@ - + - Formidable – Prism React Renderer Demo + Prism React Renderer Demo
diff --git a/packages/demo/public/formidable-icon.svg b/packages/demo/public/formidable-icon.svg deleted file mode 100644 index b1beef1..0000000 --- a/packages/demo/public/formidable-icon.svg +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - - - diff --git a/packages/demo/public/formidable-wordmark.svg b/packages/demo/public/formidable-wordmark.svg deleted file mode 100644 index 8c81362..0000000 --- a/packages/demo/public/formidable-wordmark.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/demo/public/nearform-icon.svg b/packages/demo/public/nearform-icon.svg new file mode 100644 index 0000000..4e95a02 --- /dev/null +++ b/packages/demo/public/nearform-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/demo/public/nearform-logo-white.svg b/packages/demo/public/nearform-logo-white.svg new file mode 100644 index 0000000..cd49ab3 --- /dev/null +++ b/packages/demo/public/nearform-logo-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx index 957fb9e..372ccec 100644 --- a/packages/demo/src/App.tsx +++ b/packages/demo/src/App.tsx @@ -26,9 +26,9 @@ function App() {
Formidable - Formidable + Nearform diff --git a/packages/generate-prism-languages/index.ts b/packages/generate-prism-languages/index.ts index 977114a..c613fe1 100644 --- a/packages/generate-prism-languages/index.ts +++ b/packages/generate-prism-languages/index.ts @@ -90,7 +90,7 @@ const main = async () => { } console.info( - pc.bold(pc.bgYellow(pc.black("Formidable Prism React Renderer"))), + pc.bold(pc.bgYellow(pc.black("Prism React Renderer"))), "\n" ) console.info( From d1d951eed0e5275956ff0934f143ed1d8a6838e0 Mon Sep 17 00:00:00 2001 From: Charlie Brown Date: Thu, 11 Apr 2024 14:11:48 -0500 Subject: [PATCH 2/2] FIx lint issue in CI tooling --- packages/generate-prism-languages/index.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/generate-prism-languages/index.ts b/packages/generate-prism-languages/index.ts index c613fe1..bea5226 100644 --- a/packages/generate-prism-languages/index.ts +++ b/packages/generate-prism-languages/index.ts @@ -89,10 +89,7 @@ const main = async () => { await addLanguageToOutput(language) } - console.info( - pc.bold(pc.bgYellow(pc.black("Prism React Renderer"))), - "\n" - ) + console.info(pc.bold(pc.bgYellow(pc.black("Prism React Renderer"))), "\n") console.info( pc.bgBlue(`Generated TypeScript output at:`), pc.cyan(outputPath)