├── .dockerignore ├── .eslintrc.js ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ └── bug_report.yaml ├── dependabot.yml └── workflows │ └── deploy.yaml ├── .gitignore ├── .husky ├── post-merge └── pre-commit ├── .prettierignore ├── .prettierrc.json ├── .storybook ├── main.ts ├── preview-head.html └── preview.ts ├── Dockerfile ├── LICENSE ├── README.md ├── audit-ci.json ├── documentation ├── .gitignore ├── README.md ├── babel.config.js ├── babel.config.ts ├── docs │ ├── advanced │ │ ├── _category_.json │ │ └── specific-module-installation.mdx │ ├── get-started │ │ ├── _category_.json │ │ ├── concept.mdx │ │ └── quick-start.mdx │ └── intro.mdx ├── docusaurus.config.js ├── docusaurus.config.ts ├── sidebars.ts └── source │ └── pages │ └── index.tsx ├── eslintrc.ts ├── generate-file-webpack-plugin.d.ts ├── global.d.ts ├── jest.config.ts ├── package.json ├── package.template.json ├── requirements.txt ├── reset.d.ts ├── source ├── library │ ├── components │ │ ├── py-box │ │ │ ├── index.ts │ │ │ ├── py-box.story.tsx │ │ │ ├── py-box.test.tsx │ │ │ ├── py-box.tsx │ │ │ └── py-box.types.ts │ │ ├── py-button │ │ │ ├── index.ts │ │ │ ├── py-button.story.tsx │ │ │ ├── py-button.test.tsx │ │ │ ├── py-button.tsx │ │ │ └── py-button.types.ts │ │ ├── py-config │ │ │ ├── index.ts │ │ │ ├── py-config.story.tsx │ │ │ ├── py-config.test.tsx │ │ │ ├── py-config.tsx │ │ │ └── py-config.types.ts │ │ ├── py-env │ │ │ ├── index.ts │ │ │ ├── py-env.story.tsx │ │ │ ├── py-env.test.tsx │ │ │ ├── py-env.tsx │ │ │ └── py-env.types.ts │ │ ├── py-input-box │ │ │ ├── index.ts │ │ │ ├── py-input-box.story.tsx │ │ │ ├── py-input-box.test.tsx │ │ │ ├── py-input-box.tsx │ │ │ └── py-input-box.types.ts │ │ ├── py-loader │ │ │ ├── index.ts │ │ │ ├── py-loader.story.tsx │ │ │ ├── py-loader.test.tsx │ │ │ ├── py-loader.tsx │ │ │ └── py-loader.types.ts │ │ ├── py-register-widget │ │ │ ├── index.ts │ │ │ ├── py-register-widget.story.tsx │ │ │ ├── py-register-widget.test.tsx │ │ │ ├── py-register-widget.tsx │ │ │ └── py-register-widget.types.ts │ │ ├── py-repl │ │ │ ├── index.ts │ │ │ ├── py-repl.story.tsx │ │ │ ├── py-repl.test.tsx │ │ │ ├── py-repl.tsx │ │ │ └── py-repl.types.ts │ │ ├── py-script-provider-zustand-wrapper │ │ │ ├── index.ts │ │ │ ├── py-script-provder-zustand-wrapper.tsx │ │ │ └── py-script-provider-zustand-wrapper.types.ts │ │ ├── py-script-provider │ │ │ ├── index.ts │ │ │ ├── py-script-provider.story.tsx │ │ │ ├── py-script-provider.test.tsx │ │ │ ├── py-script-provider.tsx │ │ │ └── py-script-provider.types.ts │ │ ├── py-script │ │ │ ├── __snapshots__ │ │ │ │ └── py-script.test.tsx.snap │ │ │ ├── index.ts │ │ │ ├── py-script.story.tsx │ │ │ ├── py-script.test.tsx │ │ │ ├── py-script.tsx │ │ │ └── py-script.types.ts │ │ ├── py-splashscreen │ │ │ ├── index.ts │ │ │ ├── py-splashscreen.tsx │ │ │ └── py-splashscreen.types.ts │ │ ├── py-terminal │ │ │ ├── index.ts │ │ │ ├── py-terminal.story.tsx │ │ │ ├── py-terminal.test.tsx │ │ │ ├── py-terminal.tsx │ │ │ └── py-terminal.types.ts │ │ └── py-title │ │ │ ├── index.ts │ │ │ ├── py-title.story.tsx │ │ │ ├── py-title.tsx │ │ │ └── py-title.types.ts │ ├── hooks │ │ └── use-pyscript │ │ │ ├── index.ts │ │ │ ├── use-py-script.ts │ │ │ └── use-py-script.types.ts │ ├── index.ts │ ├── stores │ │ └── py-script-store │ │ │ ├── index.ts │ │ │ ├── py-script-store.ts │ │ │ └── py-script-store.types.ts │ └── types │ │ ├── pyscript-window-object │ │ └── pyscript-window-object.ts │ │ └── react-element-properties │ │ └── react-element-properties.ts ├── scripts │ ├── build │ │ ├── constants │ │ │ └── folders-names-to-target-mapper │ │ │ │ ├── folders-names-to-target-mapper.ts │ │ │ │ └── folders-names-to-target-mapper.types.ts │ │ ├── loaders │ │ │ ├── get-javascript-module-loader │ │ │ │ ├── get-javascript-module-loader.ts │ │ │ │ └── get-javascript-module-loader.types.ts │ │ │ ├── get-source-map-loader │ │ │ │ ├── get-source-map-loader.ts │ │ │ │ └── get-source-map-loader.types.ts │ │ │ └── get-typescript-loader │ │ │ │ └── get-typescript-loader.ts │ │ ├── plugins │ │ │ ├── get-bundle-analyzer-plugin │ │ │ │ └── get-bundle-analyzer-plugin.ts │ │ │ ├── get-copy-webpack-plugin │ │ │ │ └── get-copy-webpack-plugin.ts │ │ │ ├── get-eslint-plugin │ │ │ │ └── get-eslint-plugin.ts │ │ │ ├── get-generate-main-package-json-webpack-plugin │ │ │ │ └── get-generate-main-package-json-webpack-plugin.ts │ │ │ ├── get-generate-package-json-webpack-plugin │ │ │ │ └── get-generate-package-json-webpack-plugin.ts │ │ │ ├── get-json-minimizer-plugin │ │ │ │ └── get-json-minimizer-plugin.ts │ │ │ └── get-unused-webpack-plugin │ │ │ │ └── get-unused-webpack-plugin.ts │ │ ├── root │ │ │ ├── get-config │ │ │ │ ├── get-config.ts │ │ │ │ └── get-config.types.ts │ │ │ └── get-configs │ │ │ │ └── get-configs.ts │ │ ├── types │ │ │ └── mode │ │ │ │ └── mode.ts │ │ └── wrappers │ │ │ ├── get-entrypoints │ │ │ ├── get-entrypoints.ts │ │ │ └── get-entrypoints.types.ts │ │ │ ├── get-experiments │ │ │ └── get-experiments.ts │ │ │ ├── get-externals │ │ │ └── get-externals.ts │ │ │ ├── get-loaders │ │ │ └── get-loaders.ts │ │ │ ├── get-output │ │ │ └── get-output.ts │ │ │ ├── get-plugins │ │ │ └── get-plugins.ts │ │ │ └── get-resolve │ │ │ └── get-resolve.ts │ └── runner │ │ └── commands │ │ ├── build │ │ └── build.ts │ │ └── lint │ │ └── lint.ts ├── tests_data │ ├── fibonacci.py │ ├── folium_map.py │ ├── folium_map_config.json │ ├── folium_map_config.toml │ ├── legacy_folium_map.py │ ├── matplot_chart.py │ └── test_file.py └── tsconfigs │ ├── tsconfig.amd.json │ ├── tsconfig.cjs-esm.json │ ├── tsconfig.cjs.json │ ├── tsconfig.cjs2.json │ ├── tsconfig.esm.json │ ├── tsconfig.system.json │ └── tsconfig.umd.json ├── tsconfig.json ├── tsconfig.node.json ├── tsconfig.output.template.json ├── tsconfig.package.template.json ├── tslint.json ├── unused-webpack-plugin.d.ts ├── vite.config.ts ├── webpack.config.ts └── yarn.lock /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const tsconfig = require("./tsconfig.node.json"); 2 | require("ts-node").register(tsconfig); 3 | const { default: config } = require("./eslintrc.ts"); 4 | 5 | module.exports = config; 6 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @borys-malinowski @KrzysztofZawisla @ShootGan @kaurelia -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yaml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: File a bug report 3 | title: "[Bug]: " 4 | labels: ["bug", "triage"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thanks for taking the time to fill out this bug report! 10 | - type: textarea 11 | id: what-happened 12 | attributes: 13 | label: What happened? 14 | description: Also tell us, what did you expect to happen? 15 | placeholder: Tell us what you see! 16 | value: "A bug happened!" 17 | validations: 18 | required: true 19 | - type: input 20 | id: contact 21 | attributes: 22 | label: Version 23 | description: What version you use? 24 | placeholder: ex. 1.0.0 25 | validations: 26 | required: true 27 | - type: textarea 28 | id: logs 29 | attributes: 30 | label: Relevant log output 31 | description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks. 32 | render: shell 33 | - type: textarea 34 | id: how-to-reproduce 35 | attributes: 36 | label: How to reproduce? 37 | description: Tell us how to reproduce this issue. 38 | placeholder: What are you clicking! 39 | value: "Click chrome.exe" 40 | - type: checkboxes 41 | id: terms 42 | attributes: 43 | label: Code of Conduct 44 | description: By submitting this issue, you agree to follow our Code of Conduct 45 | options: 46 | - label: "I agree to follow this project's Code of Conduct" 47 | required: true 48 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | open-pull-requests-limit: 1000 6 | schedule: 7 | interval: "daily" 8 | target-branch: "development" 9 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yaml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | branches: [main] 4 | jobs: 5 | build: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - name: Checkout repository 9 | uses: actions/checkout@v3 10 | - name: Setup Node 11 | uses: actions/setup-node@v3 12 | with: 13 | node-version: "lts/*" 14 | registry-url: "https://registry.npmjs.org" 15 | - name: Install dependencies 16 | run: yarn --ignore-engines 17 | - name: Build project 18 | run: yarn run build #--target npm 19 | - name: Create zip lib 20 | uses: vimtor/action-zip@v1 21 | with: 22 | files: library/ 23 | dest: pyscript-react.zip 24 | - name: Get current tag 25 | run: | 26 | echo "current_tag=v`grep version package.json | sed 's/.*"version": "\(.*\)".*/\1/'`" >> $GITHUB_ENV 27 | - name: Create new tag 28 | uses: rickstaa/action-create-tag@v1 29 | id: "tag_create" 30 | with: 31 | tag: "${{ env.current_tag }}" 32 | tag_exists_error: true 33 | message: "Latest release" 34 | - name: Create GitHub realese 35 | uses: "marvinpinto/action-automatic-releases@latest" 36 | with: 37 | repo_token: "${{ secrets.GITHUB_TOKEN }}" 38 | automatic_release_tag: "${{ env.current_tag }}" 39 | prerelease: false 40 | files: | 41 | LICENSE 42 | pyscript-react.zip 43 | - name: Publish to npm 🚀 44 | run: | 45 | cd library 46 | yarn publish 47 | cd .. 48 | for dir in library/*; do 49 | if [ -d "$dir" ]; then 50 | cd "$dir" 51 | yarn publish 52 | cd ../../ 53 | fi 54 | done 55 | env: 56 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 57 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | tsconfig.tsbuildinfo 3 | yarn-error.log 4 | coverage 5 | .docusaurus 6 | bundle-analyzes 7 | library/ 8 | .webpackCache/ 9 | !source/library/ -------------------------------------------------------------------------------- /.husky/post-merge: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | yarn --ignore-engines 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | yarn run lint && yarn run test 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | destination/ 2 | yarn.lock 3 | .husky/ 4 | bundle-analyzes/ 5 | coverage/ 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "trailingComma": "all", 4 | "singleQuote": false, 5 | "printWidth": 80, 6 | "tabWidth": 2, 7 | "useTabs": false, 8 | "bracketSpacing": true, 9 | "endOfLine": "auto" 10 | } 11 | -------------------------------------------------------------------------------- /.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from "@storybook/core-common"; 2 | 3 | type Config = StorybookConfig & { 4 | docs: { 5 | autodocs: boolean; 6 | }; 7 | }; 8 | 9 | const config: Config = { 10 | stories: ["../**/*.story.@(js|jsx|ts|tsx|mdx)"], 11 | addons: [ 12 | "@storybook/addon-links", 13 | "@storybook/addon-essentials", 14 | "@storybook/addon-interactions", 15 | "@storybook/addon-mdx-gfm", 16 | ], 17 | core: { 18 | builder: "@storybook/builder-vite", 19 | }, 20 | staticDirs: ["../source/tests_data"], 21 | framework: { 22 | name: "@storybook/react-vite", 23 | options: {}, 24 | }, 25 | features: { 26 | storyStoreV7: true, 27 | }, 28 | docs: { 29 | autodocs: true, 30 | }, 31 | }; 32 | 33 | export default config; 34 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:latest 2 | ADD . /home/pyscript-react 3 | WORKDIR /home/pyscript-react 4 | RUN yarn --ignore-engines 5 | CMD ["yarn", "build"] -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Py4Js 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PyScript-React 🐍⚛️ 2 | 3 | ![GitHub](https://img.shields.io/github/license/Py4Js/PyScript-React) 4 | [![Total alerts](https://img.shields.io/lgtm/alerts/g/ShootGan/PyAnalize-React.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/ShootGan/PyAnalize-React/alerts/) 5 | [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/ShootGan/PyAnalize-React.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/ShootGan/PyAnalize-React/context:javascript) 6 | ![GitHub issues](https://img.shields.io/github/issues/Py4Js/PyScript-React) 7 | ![GitHub last commit](https://img.shields.io/github/last-commit/Py4Js/PyScript-React) 8 | 9 | ![Alt](https://repobeats.axiom.co/api/embed/cba6dcd58ac96f5fd18faccbc3276dd30427e64b.svg "Repobeats analytics image") 10 | 11 | ## PyScript-React integrates [PyScript](https://github.com/pyscript/pyscript) library into react components. Making it easier to use inside your react projects 😊 12 | 13 | ## Peer dependencies 14 | 15 | Required by whole library: react, prop-types 16 | Required by PyScriptProvider, and PyScriptProviderZustandWrapper: react-helmet-async 17 | Required by PyScriptProviderZustandWrapper: zustand 18 | 19 | ## Try it 20 | 21 | ```sh 22 | yarn add pyscript-react # installation with yarn (preferred node package manager) 23 | npm i pyscript-react # installation with npm 24 | pnpm add pyscript-react # installation with pnpm 25 | ``` 26 | 27 | ### Example hello world 28 | 29 | ```tsx 30 | 31 | display("Hello world!") 32 | 33 | ``` 34 | 35 | ### Example integration with folium 36 | 37 | ```tsx 38 | 39 | 48 | 49 | ``` 50 | 51 | ```py 52 | # folium_map.py 53 | from folium import Map 54 | 55 | variable = Map(location=[45.5236, -122.6750]) 56 | display(variable, target="folium") 57 | ``` 58 | 59 | ## Documentation 60 | 61 | [Documentation](https://py4js.github.io/pyscript-react/docs/intro) 62 | 63 | `we are working on it... 🐢` 64 | 65 | ## Related implementations/libraries 66 | 67 | ### Libraries 68 | 69 | [PyScript-React-Folium]() 70 | 71 | ### Implementations 72 | 73 | [PyScript-Solid]() 74 | 75 | ## Contributing 76 | 77 | Look here: [CONTRIBUTING.md](https://github.com/Py4Js/PyScript-React/blob/main/CONTRIBUTING.md) 78 | 79 | ## Contributors 80 | 81 | ![(https://github.com/Py4Js/PyScript-React/graphs/contributors)](https://contrib.rocks/image?repo=Py4Js/PyScript-React) 82 | -------------------------------------------------------------------------------- /audit-ci.json: -------------------------------------------------------------------------------- 1 | { 2 | "high": true, 3 | "package-manager": "auto", 4 | "report-type": "summary" 5 | } 6 | -------------------------------------------------------------------------------- /documentation/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | /src 7 | 8 | # Generated files 9 | .docusaurus 10 | .cache-loader 11 | 12 | # Misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /documentation/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | Using SSH: 30 | 31 | ``` 32 | $ USE_SSH=true yarn deploy 33 | ``` 34 | 35 | Not using SSH: 36 | 37 | ``` 38 | $ GIT_USER= yarn deploy 39 | ``` 40 | 41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 42 | -------------------------------------------------------------------------------- /documentation/babel.config.js: -------------------------------------------------------------------------------- 1 | const tsconfig = require("../tsconfig.node.json"); 2 | require("ts-node").register(tsconfig); 3 | const { default: config } = require("./babel.config.ts"); 4 | 5 | module.exports = config; 6 | -------------------------------------------------------------------------------- /documentation/babel.config.ts: -------------------------------------------------------------------------------- 1 | const newConfig = { 2 | presets: [ 3 | require.resolve("@docusaurus/core/lib/babel/preset"), 4 | [ 5 | "@babel/preset-react", 6 | { 7 | runtime: "automatic", 8 | }, 9 | ], 10 | ], 11 | plugins: ["inline-react-svg", "@emotion"], 12 | }; 13 | 14 | export default newConfig; 15 | -------------------------------------------------------------------------------- /documentation/docs/advanced/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Advanced", 3 | "position": 3, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "This section explains advanced things" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /documentation/docs/advanced/specific-module-installation.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | title: Specific module installation 4 | --- 5 | 6 | # Installation of the specific module type 7 | 8 | By default, PyScript-React uses [UMD](https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-plugin-d-ts.html#umd) version of code. In this package we can access different module types. For example, if we would like to use [ESM](https://tc39.es/ecma262/#sec-modules), we can add to import a post-fix after the library name. 9 | 10 | Example: 11 | 12 | ```ts 13 | import PyScript from "pyscript-react/esm"; // main entrypoint 14 | import PyScriptProvider from "pyscript-react/esm/components/py-script-provider"; // specific component 15 | ``` 16 | 17 | Also, we can just download package with only specific module type. List of possible to download packages is relative to that which are embedded into main package. 18 | 19 | Packages: [[UMD](https://www.npmjs.com/package/pyscript-react-umd), [ESM](https://www.npmjs.com/package/pyscript-react-esm), [AMD](https://www.npmjs.com/package/pyscript-react-amd), [CJS](https://www.npmjs.com/package/pyscript-react-cjs), [SYSTEM](https://www.npmjs.com/package/pyscript-react-system), [CJS2](https://www.npmjs.com/package/pyscript-react-cjs2), [CJS-ESM](https://www.npmjs.com/package/pyscript-react-cjs-esm)] 20 | 21 | Via npm: 22 | 23 | ```sh 24 | npm i pyscript-react-(umd|esm|amd|cjs|system|cjs2|cjs-esm) 25 | ``` 26 | 27 | Via yarn: 28 | 29 | ```sh 30 | yarn add pyscript-react-(umd|esm|amd|cjs|system|cjs2|cjs-esm) 31 | ``` 32 | 33 | Via pnpm: 34 | 35 | ```sh 36 | pnpm i pyscript-react-(umd|esm|amd|cjs|system|cjs2|cjs-esm) 37 | ``` 38 | -------------------------------------------------------------------------------- /documentation/docs/get-started/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Get started", 3 | "position": 2, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "This section explains core concept behind the library, and how to quick start" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /documentation/docs/get-started/concept.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | title: Concept 4 | --- 5 | 6 | # Concept 7 | 8 | PyScript-React builds to different module types. By default it uses [UMD](https://www.npmjs.com/package/pyscript-react-umd). 9 | 10 | Folder structure 11 | 12 | ``` 13 | /root 14 | - /components 15 | - /example-component 16 | - index.ts 17 | - example-component.story.tsx 18 | - example-component.test.tsx 19 | - example-component.tsx 20 | - example-component.types.ts 21 | - /hooks 22 | - /example-hook 23 | - index.ts 24 | - example-hook.ts 25 | - example-hook.types.ts 26 | - /stores 27 | - /example-store 28 | - index.ts 29 | - example-store.ts 30 | - example-store.types.ts 31 | - /types 32 | - /example-type 33 | - example-type.ts 34 | - index.ts # library entrypoint 35 | ``` 36 | -------------------------------------------------------------------------------- /documentation/docs/get-started/quick-start.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | title: Quick start 4 | --- 5 | 6 | # Quick start 7 | 8 | ## PyScript-React installation 9 | 10 | Via npm: 11 | 12 | ```sh 13 | npm i pyscript-react 14 | ``` 15 | 16 | Via yarn: 17 | 18 | ```sh 19 | yarn add pyscript-react 20 | ``` 21 | 22 | Via pnpm: 23 | 24 | ```sh 25 | pnpm i pyscript-react 26 | ``` 27 | 28 | ## Installation of peer dependencies 29 | 30 | Via npm: 31 | 32 | ```sh 33 | npm i react prop-types 34 | ``` 35 | 36 | Via yarn: 37 | 38 | ```sh 39 | yarn add react prop-types 40 | ``` 41 | 42 | Via pnpm: 43 | 44 | ```sh 45 | pnpm i react prop-types 46 | ``` 47 | 48 | ## Installation of providers peer dependency 49 | 50 | In the case when we would like to use `PyScriptProvider` which provides pyscript script to the application, or `PyScriptProviderZustandWrapper` which does the same thing, but additionally setting up pyScript state which stores pyScript global object we have to install `react-helmet-async`. 51 | 52 | Via npm: 53 | 54 | ```sh 55 | npm i react-helmet-async 56 | ``` 57 | 58 | Via yarn: 59 | 60 | ```sh 61 | yarn add react-helmet-async 62 | ``` 63 | 64 | Via pnpm: 65 | 66 | ```sh 67 | pnpm i react-helmet-async 68 | ``` 69 | 70 | ## Installation of PyScriptProviderZustandWrapper peer dependency 71 | 72 | `PyScriptProviderZustandWrapper` uses `zustand` under the hood. To works properly it needs `zustand` package installed. 73 | 74 | Via npm: 75 | 76 | ```sh 77 | npm i zustand 78 | ``` 79 | 80 | Via yarn: 81 | 82 | ```sh 83 | yarn add zustand 84 | ``` 85 | 86 | Via pnpm: 87 | 88 | ```sh 89 | pnpm i zustand 90 | ``` 91 | -------------------------------------------------------------------------------- /documentation/docs/intro.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | title: Introduction 4 | --- 5 | 6 | # Introduction 7 | 8 | PyScript-React is a wrapper around [PyScript](https://github.com/pyscript/pyscript) for [React](https://github.com/facebook/react). The Idea behind this library is to simplify the process of embedding PyScript in our React application. 9 | 10 | ## Why PyScript-React? 11 | -------------------------------------------------------------------------------- /documentation/docusaurus.config.js: -------------------------------------------------------------------------------- 1 | const tsconfig = require("../tsconfig.node.json"); 2 | require("ts-node").register(tsconfig); 3 | const { default: config } = require("./docusaurus.config.ts"); 4 | 5 | module.exports = config; 6 | -------------------------------------------------------------------------------- /documentation/docusaurus.config.ts: -------------------------------------------------------------------------------- 1 | import { Options, ThemeConfig } from "@docusaurus/preset-classic"; 2 | import { Config } from "@docusaurus/types"; 3 | import "prism-react-renderer"; 4 | import darkCodeTheme from "prism-react-renderer/themes/dracula"; 5 | import lightCodeTheme from "prism-react-renderer/themes/github"; 6 | 7 | const organizationName = "Py4Js"; 8 | const githubLink = "https://github.com/Py4Js/pyscript-react"; 9 | 10 | const config: Config = { 11 | title: `${organizationName} Documentation`, 12 | tagline: `${organizationName} Documentation`, 13 | url: "https://py4js.github.io/", 14 | baseUrl: "/pyscript-react/", 15 | onBrokenLinks: "warn", 16 | onBrokenMarkdownLinks: "warn", 17 | organizationName, 18 | projectName: organizationName, 19 | i18n: { 20 | defaultLocale: "en", 21 | locales: ["en"], 22 | }, 23 | plugins: [ 24 | require.resolve("@cmfcmf/docusaurus-search-local"), 25 | require.resolve("plugin-image-zoom"), 26 | ], 27 | presets: [ 28 | [ 29 | "classic", 30 | { 31 | docs: { 32 | sidebarPath: require.resolve("./sidebars.ts"), 33 | editUrl: githubLink, 34 | }, 35 | } as Options, 36 | ], 37 | ], 38 | themeConfig: { 39 | navbar: { 40 | title: organizationName, 41 | items: [ 42 | { 43 | type: "doc", 44 | docId: "intro", 45 | position: "left", 46 | label: "Documentation", 47 | }, 48 | { 49 | href: githubLink, 50 | label: "GitHub", 51 | position: "right", 52 | }, 53 | ], 54 | } as ThemeConfig, 55 | prism: { 56 | theme: lightCodeTheme, 57 | darkTheme: darkCodeTheme, 58 | }, 59 | }, 60 | }; 61 | 62 | export default config; 63 | -------------------------------------------------------------------------------- /documentation/sidebars.ts: -------------------------------------------------------------------------------- 1 | import { SidebarsConfig } from "@docusaurus/plugin-content-docs"; 2 | 3 | const sidebars: SidebarsConfig = { 4 | "Table of contents": [{ type: "autogenerated", dirName: "." }], 5 | }; 6 | 7 | export default sidebars; 8 | -------------------------------------------------------------------------------- /documentation/source/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; 2 | import Layout from "@theme/Layout"; 3 | 4 | const Home = (): JSX.Element => { 5 | const { 6 | siteConfig: { title, tagline }, 7 | } = useDocusaurusContext(); 8 | return ( 9 | 10 |
123
11 | 12 | ); 13 | }; 14 | 15 | export default Home; 16 | -------------------------------------------------------------------------------- /eslintrc.ts: -------------------------------------------------------------------------------- 1 | import type { Linter } from "eslint"; 2 | 3 | const config: Linter.Config = { 4 | env: { 5 | browser: true, 6 | es2021: true, 7 | "jest/globals": true, 8 | node: true, 9 | }, 10 | extends: [ 11 | "plugin:testing-library/react", 12 | "eslint:recommended", 13 | "plugin:react/recommended", 14 | "plugin:@typescript-eslint/recommended", 15 | "plugin:jsdoc/recommended", 16 | "plugin:react-hooks/recommended", 17 | "plugin:jsx-a11y/recommended", 18 | "prettier", 19 | "plugin:sonarjs/recommended", 20 | ], 21 | parser: "@typescript-eslint/parser", 22 | parserOptions: { 23 | ecmaFeatures: { 24 | jsx: true, 25 | }, 26 | tsconfigRootDir: __dirname, 27 | ecmaVersion: "latest", 28 | project: "./tsconfig.json", 29 | sourceType: "module", 30 | }, 31 | plugins: [ 32 | "testing-library", 33 | "react", 34 | "@typescript-eslint", 35 | "eslint-plugin-tsdoc", 36 | "jsdoc", 37 | "jest", 38 | "prettier", 39 | "sonarjs", 40 | ], 41 | settings: { 42 | react: { 43 | version: "detect", 44 | }, 45 | }, 46 | rules: { 47 | "prettier/prettier": [ 48 | "error", 49 | { 50 | endOfLine: "auto", 51 | }, 52 | ], 53 | "max-params": ["error", 1], 54 | "@typescript-eslint/no-inferrable-types": "off", 55 | "no-invalid-this": "error", 56 | "react/react-in-jsx-scope": "off", 57 | "no-console": "warn", 58 | "react-hooks/exhaustive-deps": "off", 59 | "no-nested-ternary": "off", 60 | }, 61 | overrides: [ 62 | { 63 | files: ["*.js"], 64 | rules: { 65 | "@typescript-eslint/no-var-requires": "off", 66 | }, 67 | }, 68 | { 69 | files: ["*.ts", "*.tsx"], 70 | rules: { 71 | "@typescript-eslint/no-unused-vars": "off", 72 | }, 73 | }, 74 | ], 75 | }; 76 | 77 | export default config; 78 | -------------------------------------------------------------------------------- /generate-file-webpack-plugin.d.ts: -------------------------------------------------------------------------------- 1 | declare module "generate-file-webpack-plugin"; 2 | -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | import type { DetailedHTMLProps, HTMLAttributes } from "react"; 2 | import type PyScriptWindowObject from "~types/pyscript-window-object/pyscript-window-object"; 3 | import type ReactElementProps from "~types/react-element-properties/react-element-properties"; 4 | 5 | declare global { 6 | interface Window { 7 | pyscript: PyScriptWindowObject; 8 | } 9 | namespace JSX { 10 | export interface IntrinsicElements { 11 | ["py-script"]: Omit< 12 | ReactElementProps< 13 | DetailedHTMLProps, HTMLElement> 14 | >, 15 | "children" 16 | > & { 17 | children: string; 18 | output?: string; 19 | }; 20 | ["py-loader"]: Omit< 21 | ReactElementProps< 22 | DetailedHTMLProps, HTMLElement> 23 | >, 24 | "children" 25 | >; 26 | ["py-env"]: Omit< 27 | ReactElementProps< 28 | DetailedHTMLProps, HTMLElement> 29 | >, 30 | "children" 31 | > & { 32 | children: string; 33 | }; 34 | ["py-repl"]: ReactElementProps< 35 | DetailedHTMLProps, HTMLElement> 36 | > & { 37 | children?: string; 38 | "auto-generate"?: boolean; 39 | }; 40 | ["py-config"]: ReactElementProps< 41 | DetailedHTMLProps, HTMLElement> 42 | > & { 43 | children?: string; 44 | }; 45 | ["py-inputbox"]: ReactElementProps< 46 | DetailedHTMLProps, HTMLElement> 47 | > & { 48 | children: string; 49 | }; 50 | ["py-box"]: ReactElementProps< 51 | DetailedHTMLProps, HTMLElement> 52 | >; 53 | ["py-register-widget"]: ReactElementProps< 54 | DetailedHTMLProps, HTMLElement> 55 | > & { 56 | src: string; 57 | name?: string; 58 | klass?: string; 59 | }; 60 | ["py-button"]: ReactElementProps< 61 | DetailedHTMLProps, HTMLElement> 62 | > & { 63 | children: string; 64 | label: string; 65 | }; 66 | ["py-title"]: ReactElementProps< 67 | DetailedHTMLProps, HTMLElement> 68 | > & { 69 | children: string; 70 | }; 71 | ["py-terminal"]: ReactElementProps< 72 | DetailedHTMLProps, HTMLElement> 73 | > & { 74 | auto?: boolean; 75 | }; 76 | ["py-splashscreen"]: ReactElementProps< 77 | DetailedHTMLProps, HTMLElement> 78 | > & { 79 | autoclose?: boolean; 80 | enabled?: boolean; 81 | }; 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from "@jest/types"; 2 | import { join } from "path"; 3 | import { pathsToModuleNameMapper } from "ts-jest"; 4 | import { compilerOptions } from "~root/tsconfig.json"; 5 | 6 | const config: Config.InitialOptions = { 7 | preset: "ts-jest", 8 | testTimeout: 100_000_000, 9 | setupFilesAfterEnv: ["jest-extended", "@testing-library/jest-dom"], 10 | testEnvironment: "jsdom", 11 | moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { 12 | prefix: join(process.cwd(), "."), 13 | }), 14 | }; 15 | 16 | export default config; 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pyscript-react", 3 | "version": "0.0.4", 4 | "main": "index.js", 5 | "repository": "https://github.com/Py4Js/pyscript-react", 6 | "author": "KrzysztofZawisla , BorysMalinowski ", 7 | "license": "MIT", 8 | "private": true, 9 | "scripts": { 10 | "prepare": "husky install", 11 | "storybook": "cross-env TS_NODE_PROJECT=tsconfig.node.json storybook dev", 12 | "documentation": "cd documentation && docusaurus start", 13 | "build-documentation": "cd documentation && docusaurus build", 14 | "publish-documentation": "gh-pages -b documentation -d documentation/build", 15 | "build": "cross-env TS_NODE_PROJECT=tsconfig.node.json ts-node ./source/scripts/runner/commands/build/build.ts", 16 | "test": "cross-env jest --coverage", 17 | "lint": "cross-env TS_NODE_PROJECT=tsconfig.node.json ts-node ./source/scripts/runner/commands/lint/lint.ts", 18 | "prepublishOnly": "yarn run build" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.21.5", 22 | "@babel/preset-env": "^7.21.5", 23 | "@babel/preset-react": "^7.18.6", 24 | "@babel/preset-typescript": "^7.21.5", 25 | "@cmfcmf/docusaurus-search-local": "^1.1.0", 26 | "@docusaurus/core": "^2.4.0", 27 | "@docusaurus/module-type-aliases": "^2.4.0", 28 | "@docusaurus/preset-classic": "^2.4.0", 29 | "@emotion/babel-plugin": "^11.10.6", 30 | "@storybook/addon-actions": "^7.0.6", 31 | "@storybook/addon-essentials": "^7.0.6", 32 | "@storybook/addon-interactions": "^7.0.6", 33 | "@storybook/addon-links": "^7.0.6", 34 | "@storybook/addon-mdx-gfm": "^7.0.6", 35 | "@storybook/builder-vite": "^7.0.6", 36 | "@storybook/builder-webpack5": "^6.5.7", 37 | "@storybook/core-common": "^6.5.16", 38 | "@storybook/jest": "^0.0.10", 39 | "@storybook/manager-webpack5": "^6.5.7", 40 | "@storybook/node-logger": "^6.5.7", 41 | "@storybook/preset-create-react-app": "^4.1.2", 42 | "@storybook/react": "^7.0.6", 43 | "@storybook/react-vite": "^7.0.7", 44 | "@storybook/testing-library": "^0.1.0", 45 | "@testing-library/react": "^14.0.0", 46 | "@total-typescript/ts-reset": "^0.4.2", 47 | "@types/node": "^18.16.0", 48 | "@types/webpack-bundle-analyzer": "^4.6.0", 49 | "@types/webpack-node-externals": "^3.0.0", 50 | "@typescript-eslint/eslint-plugin": "^5.59.1", 51 | "@typescript-eslint/parser": "^5.59.1", 52 | "babel-loader": "^9.1.2", 53 | "babel-plugin-inline-react-svg": "^2.0.2", 54 | "cache-loader": "^4.1.0", 55 | "copy-webpack-plugin": "^11.0.0", 56 | "cross-env": "^7.0.3", 57 | "eslint": "^8.39.0", 58 | "eslint-config-prettier": "^8.8.0", 59 | "eslint-plugin-jest": "^27.2.1", 60 | "eslint-plugin-jsdoc": "^43.1.1", 61 | "eslint-plugin-jsx-a11y": "^6.7.1", 62 | "eslint-plugin-prettier": "^4.2.1", 63 | "eslint-plugin-react": "^7.32.2", 64 | "eslint-plugin-react-hooks": "^4.6.0", 65 | "eslint-plugin-sonarjs": "^0.19.0", 66 | "eslint-plugin-testing-library": "^5.10.3", 67 | "eslint-plugin-tsdoc": "^0.2.17", 68 | "eslint-webpack-plugin": "^4.0.1", 69 | "generate-file-webpack-plugin": "^1.0.1", 70 | "generate-package-json-webpack-plugin": "^2.6.0", 71 | "gh-pages": "^5.0.0", 72 | "glob": "^10.2.2", 73 | "husky": "^8.0.3", 74 | "jest": "^29.5.0", 75 | "jest-environment-jsdom": "^29.5.0", 76 | "jest-extended": "^3.2.4", 77 | "jsdom": "^21.1.1", 78 | "json-minimizer-webpack-plugin": "^4.0.0", 79 | "plugin-image-zoom": "^1.1.0", 80 | "prettier": "^2.8.8", 81 | "prettier-plugin-organize-imports": "^3.2.2", 82 | "prop-types": "^15.8.1", 83 | "react": "^18.2.0", 84 | "react-dom": "^18.2.0", 85 | "react-helmet-async": "^1.3.0", 86 | "rimraf": "^5.0.0", 87 | "snyk": "^1.1144.0", 88 | "sort-package-json": "^2.4.1", 89 | "source-map-loader": "^4.0.1", 90 | "storybook": "^7.0.7", 91 | "super-expressive": "^2.0.0", 92 | "ts-jest": "^29.1.0", 93 | "ts-node": "^10.9.1", 94 | "ts-patch": "^2.1.0", 95 | "tsc-alias": "^1.8.6", 96 | "tsconfig-paths": "^4.2.0", 97 | "tsd": "^0.28.1", 98 | "tslint": "^6.1.3", 99 | "typescript": "^5.0.4", 100 | "typescript-transform-paths": "^3.4.6", 101 | "unused-webpack-plugin": "^2.4.0", 102 | "vite": "^4.3.1", 103 | "vite-tsconfig-paths": "^4.2.0", 104 | "webpack": "^5.81.0", 105 | "webpack-bundle-analyzer": "^4.8.0", 106 | "webpack-cli": "^5.0.2", 107 | "webpack-node-externals": "^3.0.0", 108 | "yarn": "^1.22.19", 109 | "zustand": "^4.3.7", 110 | "zx": "4.2.0" 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /package.template.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pyscript-react", 3 | "main": "./index.js", 4 | "repository": "https://github.com/Py4Js/pyscript-react", 5 | "author": "KrzysztofZawisla , ShootGan ", 6 | "license": "MIT", 7 | "peerDependencies": { 8 | "react": "*", 9 | "react-helmet-async": "*", 10 | "prop-types": "*", 11 | "zustand": "*" 12 | }, 13 | "peerDependenciesMeta": { 14 | "zustand": { 15 | "optional": true 16 | }, 17 | "react-helmet-async": { 18 | "optional": true 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | black>=23.3.0 2 | -------------------------------------------------------------------------------- /reset.d.ts: -------------------------------------------------------------------------------- 1 | import "@total-typescript/ts-reset"; 2 | -------------------------------------------------------------------------------- /source/library/components/py-box/index.ts: -------------------------------------------------------------------------------- 1 | import PyBox from "~components/py-box/py-box"; 2 | import type { 3 | PyBoxProperties, 4 | PyBoxPropertiesBase, 5 | PyBoxTag, 6 | } from "~components/py-box/py-box.types"; 7 | 8 | export type { PyBoxPropertiesBase, PyBoxProperties, PyBoxTag }; 9 | 10 | export default PyBox; 11 | -------------------------------------------------------------------------------- /source/library/components/py-box/py-box.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import PyScriptProvider from "../py-script-provider/py-script-provider"; 3 | import PyBox from "./py-box"; 4 | import type { PyBoxProperties, PyBoxTag } from "./py-box.types"; 5 | 6 | export default { 7 | component: PyBox, 8 | } as Meta; 9 | 10 | const Template: StoryFn = ({ 11 | ...rest 12 | }: PyBoxProperties): JSX.Element => { 13 | return ( 14 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const PyBoxWithMultipleElementsExample: StoryFn = 24 | Template.bind({}); 25 | 26 | PyBoxWithMultipleElementsExample.args = { 27 | children: [ 28 |
First element
, 29 |
Second element
, 30 |
Third element
, 31 | ], 32 | }; 33 | 34 | export const PyBoxWithSingleElementExample: StoryFn = 35 | Template.bind({}); 36 | 37 | PyBoxWithSingleElementExample.args = { 38 | children:
Single element
, 39 | }; 40 | -------------------------------------------------------------------------------- /source/library/components/py-box/py-box.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-box/py-box.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-box/py-box.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import { forwardRef, type ForwardedRef } from "react"; 3 | import type { PyBoxProperties, PyBoxTag } from "./py-box.types"; 4 | 5 | /** 6 | * Container element that can arrange children using the CSS Flexbox layout model in the horizontal direction. It uses Tailwind CSS width classes to define the column widths 7 | * @param root0 8 | * @param root0.children 9 | * @deprecated 10 | */ 11 | const PyBox: PyBoxTag = forwardRef( 12 | ( 13 | { children, ...rest }: PyBoxProperties, 14 | reference: ForwardedRef | undefined, 15 | // eslint-disable-next-line max-params 16 | ): JSX.Element => { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | }, 23 | ) as PyBoxTag; 24 | 25 | PyBox.displayName = "PyBox"; 26 | 27 | PyBox.propTypes = { 28 | children: propTypes.oneOfType([ 29 | propTypes.arrayOf(propTypes.node), 30 | propTypes.node, 31 | ]), 32 | widths: propTypes.string, 33 | }; 34 | 35 | export default PyBox; 36 | -------------------------------------------------------------------------------- /source/library/components/py-box/py-box.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | DetailedHTMLProps, 3 | ForwardedRef, 4 | HTMLAttributes, 5 | PropsWithChildren, 6 | WeakValidationMap, 7 | } from "react"; 8 | import type ReactElementProps from "~types/react-element-properties/react-element-properties"; 9 | 10 | export type PyBoxPropertiesBase = PropsWithChildren< 11 | ReactElementProps< 12 | DetailedHTMLProps, HTMLElement> 13 | > & { 14 | widths?: string; 15 | } 16 | >; 17 | 18 | export type PyBoxProperties = 19 | OptionalProperties extends infer OptionalProperties 20 | ? OptionalProperties & PyBoxPropertiesBase 21 | : PyBoxPropertiesBase; 22 | 23 | export type PyBoxTag = { 24 | ( 25 | properties: PyBoxProperties, 26 | reference?: ForwardedRef, 27 | ): JSX.Element; 28 | displayName?: string; 29 | defaultProps?: Partial; 30 | propTypes?: WeakValidationMap; 31 | }; 32 | -------------------------------------------------------------------------------- /source/library/components/py-button/index.ts: -------------------------------------------------------------------------------- 1 | import PyButton from "~components/py-button/py-button"; 2 | import type { 3 | PyButtonProperties, 4 | PyButtonPropertiesBase, 5 | PyButtonTag, 6 | } from "~components/py-button/py-button.types"; 7 | 8 | export type { PyButtonPropertiesBase, PyButtonProperties, PyButtonTag }; 9 | 10 | export default PyButton; 11 | -------------------------------------------------------------------------------- /source/library/components/py-button/py-button.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import PyScriptProvider from "~components/py-script-provider/py-script-provider"; 3 | import PyButton from "./py-button"; 4 | import type { PyButtonProperties, PyButtonTag } from "./py-button.types"; 5 | 6 | export default { 7 | component: PyButton, 8 | } as Meta; 9 | 10 | const Template: StoryFn = ({ 11 | ...rest 12 | }: PyButtonProperties): JSX.Element => { 13 | return ( 14 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const PyButtonExample: StoryFn = Template.bind({}); 24 | 25 | PyButtonExample.args = { 26 | label: "Example title", 27 | }; 28 | -------------------------------------------------------------------------------- /source/library/components/py-button/py-button.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-button/py-button.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-button/py-button.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import { forwardRef, type ForwardedRef } from "react"; 3 | import type { PyButtonProperties, PyButtonTag } from "./py-button.types"; 4 | 5 | /** 6 | * @param root0 7 | * @param root0.children 8 | * @param root0.label 9 | * @deprecated 10 | */ 11 | const PyButton: PyButtonTag = forwardRef( 12 | ( 13 | { children, label, ...rest }: PyButtonProperties, 14 | reference: ForwardedRef | undefined, 15 | // eslint-disable-next-line max-params 16 | ): JSX.Element => { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | }, 23 | ) as PyButtonTag; 24 | 25 | PyButton.displayName = "PyButton"; 26 | 27 | PyButton.propTypes = { 28 | children: propTypes.string.isRequired, 29 | label: propTypes.string.isRequired, 30 | }; 31 | 32 | export default PyButton; 33 | -------------------------------------------------------------------------------- /source/library/components/py-button/py-button.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | DetailedHTMLProps, 3 | ForwardedRef, 4 | HTMLAttributes, 5 | WeakValidationMap, 6 | } from "react"; 7 | import type ReactElementProps from "~types/react-element-properties/react-element-properties"; 8 | 9 | export type PyButtonPropertiesBase = Omit< 10 | ReactElementProps< 11 | DetailedHTMLProps, HTMLElement> 12 | >, 13 | "children" 14 | > & { 15 | children: string; 16 | label: string; 17 | }; 18 | 19 | export type PyButtonProperties = 20 | OptionalProperties extends infer OptionalProperties 21 | ? OptionalProperties & PyButtonPropertiesBase 22 | : PyButtonPropertiesBase; 23 | 24 | export type PyButtonTag = { 25 | ( 26 | properties: PyButtonProperties, 27 | reference?: ForwardedRef, 28 | ): JSX.Element; 29 | displayName?: string; 30 | defaultProps?: Partial; 31 | propTypes?: WeakValidationMap; 32 | }; 33 | -------------------------------------------------------------------------------- /source/library/components/py-config/index.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | PyConfigFetch, 3 | PyConfigFetchItem, 4 | PyConfigInterpreters, 5 | PyConfigProperties, 6 | PyConfigPropertiesBase, 7 | PyConfigPropertiesWithChildren, 8 | PyConfigPropertiesWithJsonType, 9 | PyConfigPropertiesWithTomlType, 10 | PyConfigPropertiesWithoutChildren, 11 | PyConfigSharedJsonProperties, 12 | PyConfigSplashscreen, 13 | PyConfigTag, 14 | } from "~components/py-config/py-config.types"; 15 | import PyConfig from "./py-config"; 16 | 17 | export type { 18 | PyConfigInterpreters, 19 | PyConfigFetch, 20 | PyConfigFetchItem, 21 | PyConfigSplashscreen, 22 | PyConfigSharedJsonProperties, 23 | PyConfigPropertiesWithJsonType, 24 | PyConfigPropertiesWithTomlType, 25 | PyConfigPropertiesWithChildren, 26 | PyConfigPropertiesWithoutChildren, 27 | PyConfigPropertiesBase, 28 | PyConfigProperties, 29 | PyConfigTag, 30 | }; 31 | 32 | export default PyConfig; 33 | -------------------------------------------------------------------------------- /source/library/components/py-config/py-config.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import PyScriptProvider from "~root/source/library/components/py-script-provider/py-script-provider"; 3 | import PyConfig from "./py-config"; 4 | import type { PyConfigProperties, PyConfigTag } from "./py-config.types"; 5 | 6 | export default { 7 | component: PyConfig, 8 | } as Meta; 9 | 10 | const pythonTestFile: string = "./test_file.py"; 11 | 12 | const Template: StoryFn = ({ 13 | ...rest 14 | }: PyConfigProperties): JSX.Element => { 15 | return ( 16 | 17 | 18 | 19 | ); 20 | }; 21 | 22 | export const PyConfigExample: StoryFn = Template.bind({}); 23 | 24 | PyConfigExample.args = { 25 | type: "json", 26 | packages: new Set(["matplotlib", "numpy", "folium"]), 27 | plugins: new Set(["https://pyscript.net/latest/plugins/python/py_tutor.py"]), 28 | fetch: [ 29 | { 30 | files: new Set([pythonTestFile]), 31 | }, 32 | ], 33 | }; 34 | 35 | export const PyConfigExternalJsonConfigExample: StoryFn = 36 | Template.bind({}); 37 | 38 | PyConfigExternalJsonConfigExample.args = { 39 | type: "json", 40 | source: pythonTestFile, 41 | }; 42 | 43 | export const PyConfigExternalTomlConfigExample: StoryFn = 44 | Template.bind({}); 45 | 46 | PyConfigExternalTomlConfigExample.args = { 47 | type: "toml", 48 | source: pythonTestFile, 49 | }; 50 | 51 | export const PyConfigTomlConfigExample: StoryFn = 52 | Template.bind({}); 53 | 54 | PyConfigTomlConfigExample.args = { 55 | type: "toml", 56 | children: "", 57 | }; 58 | -------------------------------------------------------------------------------- /source/library/components/py-config/py-config.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-config/py-config.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-config/py-config.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import { 3 | forwardRef, 4 | useEffect, 5 | useMemo, 6 | type ForwardedRef, 7 | type WeakValidationMap, 8 | } from "react"; 9 | import type { 10 | PyConfigFetch, 11 | PyConfigFetchItem, 12 | PyConfigInterpreters, 13 | PyConfigProperties, 14 | PyConfigPropertiesBase, 15 | PyConfigSplashscreen, 16 | PyConfigTag, 17 | } from "./py-config.types"; 18 | 19 | const checkForAnyKey = ( 20 | transformedObject: Record, 21 | ): boolean => { 22 | return Boolean( 23 | Object.entries(transformedObject).filter( 24 | ([, value]: [string, unknown]): boolean => { 25 | return value !== undefined; 26 | }, 27 | ).length, 28 | ); 29 | }; 30 | 31 | /** 32 | * Py config. 33 | * @type {PyConfigTag} 34 | * @returns {JSX.Element} 35 | * @param {string | (Record & PyConfigSharedJsonProperties)} properties.children - py-config content 36 | * @param {string} properties.source - Path to Python config-file. 37 | * @param {"toml" | "json"} properties.type - Type of Python config (TOML or json, default TOML). 38 | * @param {PyConfigSplashscreen} properties.splashscreen - This is one of the core plugins in PyScript, which is active by default. The splashscreen is the first thing you see when you open a page with Pyscript while it is loading itself and all the necessary resources. 39 | * @param {PyConfigInterpreters} properties.interpreters - ? 40 | * @param {PyConfigFetch} properties.fetch - ? 41 | * @param {string[] | Set} properties.packages - List of needed Python packages. 42 | * @param {string[] | Set} properties.plugins - Pyscript plugins 43 | * @see {@link https://docs.pyscript.net/latest/reference/elements/py-config.html} Original py-config element documentation. 44 | * @see {@link https://pyscript-react.github.io/} Pyscript-react element documentation. 45 | */ 46 | const PyConfig: PyConfigTag = forwardRef( 47 | ( 48 | { 49 | children, 50 | source, 51 | type, 52 | splashscreen, 53 | interpreters, 54 | fetch, 55 | packages, 56 | plugins, 57 | ...rest 58 | }: PyConfigProperties, 59 | reference: ForwardedRef | undefined, 60 | // eslint-disable-next-line max-params, sonarjs/cognitive-complexity 61 | ): JSX.Element => { 62 | const config: string = useMemo((): string => { 63 | if (type === "json") { 64 | const transformedPlugins: string[] = [ 65 | ...(plugins ?? []), 66 | ...(children?.plugins ?? []), 67 | ]; 68 | const transformedPackages: string[] = [ 69 | ...(packages ?? []), 70 | ...(children?.packages ?? []), 71 | ]; 72 | const transformedFetch: PyConfigFetch = [ 73 | ...(fetch ?? []), 74 | ...(children?.fetch ?? []), 75 | ].map( 76 | ({ files, ...restItem }: PyConfigFetchItem): PyConfigFetchItem => { 77 | const transformedFiles: string[] = [...(files ?? [])]; 78 | return { 79 | files: transformedFiles.length ? transformedFiles : undefined, 80 | ...restItem, 81 | }; 82 | }, 83 | ); 84 | const transformedInterpreters: Omit & { 85 | src?: string; 86 | } = { 87 | src: interpreters?.source, 88 | name: interpreters?.name, 89 | language: interpreters?.language, 90 | ...children?.interpreters, 91 | }; 92 | const transformedSplashscreen: PyConfigSplashscreen = { 93 | autoclose: splashscreen?.autoclose, 94 | ...children?.splashscreen, 95 | }; 96 | const config: string = JSON.stringify({ 97 | splashscreen: checkForAnyKey(transformedSplashscreen) 98 | ? transformedSplashscreen 99 | : undefined, 100 | interpreters: checkForAnyKey(transformedInterpreters) 101 | ? transformedInterpreters 102 | : undefined, 103 | fetch: transformedFetch.length ? transformedFetch : undefined, 104 | packages: transformedPackages.length 105 | ? transformedPackages 106 | : undefined, 107 | plugins: transformedPlugins.length ? transformedPlugins : undefined, 108 | ...children, 109 | }); 110 | return config; 111 | } 112 | return `${children ?? ""}`; 113 | }, [children, splashscreen, interpreters, fetch, packages, plugins]); 114 | useEffect((): void => { 115 | source && 116 | children && 117 | // eslint-disable-next-line no-console 118 | console.warn( 119 | "Children is passed with source. It may create undefined behavior. Remove one of these properties.", 120 | ); 121 | }, [source, children]); 122 | return ( 123 | 124 | {!source ? config : undefined} 125 | 126 | ); 127 | }, 128 | ) as PyConfigTag; 129 | 130 | PyConfig.displayName = "PyConfig"; 131 | 132 | PyConfig.propTypes = { 133 | children: propTypes.oneOfType([ 134 | propTypes.string.isRequired, 135 | propTypes.object, 136 | ]), 137 | type: propTypes.oneOf(["toml", "json"]), 138 | source: propTypes.string, 139 | splashscreen: propTypes.shape({ 140 | autoclose: propTypes.bool, 141 | }), 142 | interpreters: propTypes.shape({ 143 | source: propTypes.string, 144 | name: propTypes.string, 145 | language: propTypes.string, 146 | }), 147 | fetch: propTypes.arrayOf( 148 | propTypes.shape({ 149 | files: propTypes.oneOfType([ 150 | propTypes.arrayOf(propTypes.string), 151 | propTypes.instanceOf(Set), 152 | ]), 153 | }), 154 | ), 155 | packages: propTypes.oneOfType([ 156 | propTypes.arrayOf(propTypes.string), 157 | propTypes.instanceOf(Set), 158 | ]), 159 | plugins: propTypes.arrayOf(propTypes.string), 160 | } as WeakValidationMap; 161 | 162 | export default PyConfig; 163 | -------------------------------------------------------------------------------- /source/library/components/py-config/py-config.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | DetailedHTMLProps, 3 | ForwardedRef, 4 | HTMLAttributes, 5 | WeakValidationMap, 6 | } from "react"; 7 | import type ReactElementProps from "~types/react-element-properties/react-element-properties"; 8 | 9 | export type PyConfigInterpreters = { 10 | source?: string; 11 | name?: string; 12 | language?: string; 13 | }; 14 | export type PyConfigFetchItem = { files?: string[] | Set }; 15 | 16 | export type PyConfigFetch = PyConfigFetchItem[]; 17 | 18 | export type PyConfigSplashscreen = { 19 | autoclose?: boolean; 20 | }; 21 | 22 | export type PyConfigSharedJsonProperties = { 23 | splashscreen?: PyConfigSplashscreen; 24 | interpreters?: PyConfigInterpreters; 25 | fetch?: PyConfigFetch; 26 | packages?: string[] | Set; 27 | plugins?: string[] | Set; 28 | }; 29 | 30 | export type PyConfigPropertiesWithJsonType = { 31 | children: Record & PyConfigSharedJsonProperties; 32 | type: "json"; 33 | } & PyConfigSharedJsonProperties; 34 | 35 | export type PyConfigPropertiesWithTomlType = { 36 | children: string; 37 | /** 38 | * @default toml 39 | */ 40 | type?: "toml"; 41 | splashscreen?: never; 42 | interpreters?: never; 43 | fetch?: never; 44 | packages?: never; 45 | plugins?: never; 46 | }; 47 | 48 | export type PyConfigPropertiesWithChildren = ( 49 | | PyConfigPropertiesWithJsonType 50 | | PyConfigPropertiesWithTomlType 51 | ) & { 52 | source?: never; 53 | }; 54 | 55 | export type PyConfigPropertiesWithoutChildren = { 56 | source: string; 57 | /** 58 | * @default toml 59 | */ 60 | type?: "toml" | "json"; 61 | children?: never; 62 | splashscreen?: never; 63 | interpreters?: never; 64 | fetch?: never; 65 | packages?: never; 66 | plugins?: never; 67 | }; 68 | 69 | export type PyConfigPropertiesBase = Omit< 70 | ReactElementProps< 71 | DetailedHTMLProps, HTMLElement> 72 | >, 73 | "children" 74 | > & 75 | (PyConfigPropertiesWithChildren | PyConfigPropertiesWithoutChildren); 76 | 77 | export type PyConfigProperties = 78 | OptionalProperties extends infer OptionalProperties 79 | ? OptionalProperties & PyConfigPropertiesBase 80 | : PyConfigPropertiesBase; 81 | 82 | export type PyConfigTag = { 83 | ( 84 | properties: PyConfigProperties, 85 | reference?: ForwardedRef, 86 | ): JSX.Element; 87 | displayName?: string; 88 | defaultProps?: Partial; 89 | propTypes?: WeakValidationMap; 90 | }; 91 | -------------------------------------------------------------------------------- /source/library/components/py-env/index.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | PyEnvChildrenAsObject, 3 | PyEnvChildrenAsObjectWithPaths, 4 | PyEnvChildrenAsObjectWithoutPaths, 5 | PyEnvProperties, 6 | PyEnvPropertiesBase, 7 | PyEnvTag, 8 | } from "~components/py-env/py-env.types"; 9 | import PyEnv from "./py-env"; 10 | 11 | export type { 12 | PyEnvChildrenAsObject, 13 | PyEnvChildrenAsObjectWithPaths, 14 | PyEnvChildrenAsObjectWithoutPaths, 15 | PyEnvPropertiesBase, 16 | PyEnvProperties, 17 | PyEnvTag, 18 | }; 19 | 20 | export default PyEnv; 21 | -------------------------------------------------------------------------------- /source/library/components/py-env/py-env.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import PyScriptProvider from "~root/source/library/components/py-script-provider/py-script-provider"; 3 | import PyEnv from "./py-env"; 4 | import type { PyEnvProperties, PyEnvTag } from "./py-env.types"; 5 | 6 | export default { 7 | component: PyEnv, 8 | } as Meta; 9 | 10 | const Template: StoryFn = ({ 11 | ...rest 12 | }: PyEnvProperties): JSX.Element => { 13 | return ( 14 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const PyEnvExample: StoryFn = Template.bind({}); 24 | 25 | PyEnvExample.args = { 26 | children: ["folium", "numpy"], 27 | }; 28 | -------------------------------------------------------------------------------- /source/library/components/py-env/py-env.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-env/py-env.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-env/py-env.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import { 3 | forwardRef, 4 | useMemo, 5 | type ForwardedRef, 6 | type WeakValidationMap, 7 | } from "react"; 8 | import type { 9 | PyEnvChildrenAsObject, 10 | PyEnvProperties, 11 | PyEnvPropertiesBase, 12 | PyEnvTag, 13 | } from "./py-env.types"; 14 | 15 | /** 16 | * @param root0 17 | * @param root0.children 18 | * @deprecated 19 | */ 20 | const PyEnv: PyEnvTag = forwardRef( 21 | ( 22 | { children, ...rest }: PyEnvProperties, 23 | reference: ForwardedRef | undefined, 24 | // eslint-disable-next-line max-params 25 | ): JSX.Element => { 26 | const fixedChildren: string = useMemo((): string => { 27 | const { paths, items }: PyEnvChildrenAsObject = Object(children); 28 | if (paths || items) { 29 | const fixedItems: string = 30 | [...(items || [])] 31 | ?.map((element: string): string => { 32 | return `- ${element}`; 33 | }) 34 | .join("\n") || ""; 35 | const fixedPaths: string = 36 | [...(paths || [])] 37 | ?.map((element: string): string => { 38 | return `\t- ${element}`; 39 | }) 40 | .join("\n") || ""; 41 | const fixedPathsWithCondition: string = fixedPaths 42 | ? `\n- paths:\n${fixedPaths}` 43 | : ""; 44 | return `${fixedItems}${fixedPathsWithCondition}`; 45 | } else { 46 | return Array.isArray(children) 47 | ? children 48 | .map((element: string): string => { 49 | return `- ${element}`; 50 | }) 51 | .join("\n") 52 | : (children as string); 53 | } 54 | }, [children]); 55 | return ( 56 | 57 | {fixedChildren} 58 | 59 | ); 60 | }, 61 | ) as PyEnvTag; 62 | 63 | PyEnv.displayName = "PyEnv"; 64 | 65 | PyEnv.propTypes = { 66 | children: propTypes.oneOfType([ 67 | propTypes.string, 68 | propTypes.array, 69 | propTypes.exact({ 70 | items: propTypes.arrayOf(propTypes.string), 71 | paths: propTypes.arrayOf(propTypes.string), 72 | }), 73 | ]).isRequired, 74 | } as WeakValidationMap; 75 | 76 | export default PyEnv; 77 | -------------------------------------------------------------------------------- /source/library/components/py-env/py-env.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | DetailedHTMLProps, 3 | ForwardedRef, 4 | HTMLAttributes, 5 | WeakValidationMap, 6 | } from "react"; 7 | import type ReactElementProps from "~types/react-element-properties/react-element-properties"; 8 | 9 | export type PyEnvChildrenAsObject = 10 | | PyEnvChildrenAsObjectWithPaths 11 | | PyEnvChildrenAsObjectWithoutPaths; 12 | 13 | export type PyEnvChildrenAsObjectWithPaths = { 14 | paths: string[] | Set; 15 | items?: string[] | Set; 16 | }; 17 | 18 | export type PyEnvChildrenAsObjectWithoutPaths = { 19 | paths?: string[] | Set; 20 | items: string[] | Set; 21 | }; 22 | 23 | export type PyEnvPropertiesBase = Omit< 24 | ReactElementProps< 25 | DetailedHTMLProps, HTMLElement> 26 | >, 27 | "children" 28 | > & { 29 | children: string | string[] | Set | PyEnvChildrenAsObject; 30 | }; 31 | 32 | export type PyEnvProperties = 33 | OptionalProperties extends infer OptionalProperties 34 | ? OptionalProperties & PyEnvPropertiesBase 35 | : PyEnvPropertiesBase; 36 | 37 | export type PyEnvTag = { 38 | ( 39 | properties: PyEnvProperties, 40 | reference?: ForwardedRef, 41 | ): JSX.Element; 42 | displayName?: string; 43 | defaultProps?: Partial; 44 | propTypes?: WeakValidationMap; 45 | }; 46 | -------------------------------------------------------------------------------- /source/library/components/py-input-box/index.ts: -------------------------------------------------------------------------------- 1 | import PyInputBox from "./py-input-box"; 2 | import type { 3 | PyInputBoxProperties, 4 | PyInputBoxPropertiesBase, 5 | PyInputBoxTag, 6 | } from "./py-input-box.types"; 7 | 8 | export type { PyInputBoxTag, PyInputBoxPropertiesBase, PyInputBoxProperties }; 9 | export default PyInputBox; 10 | -------------------------------------------------------------------------------- /source/library/components/py-input-box/py-input-box.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import PyScriptProvider from "~root/source/library/components/py-script-provider/py-script-provider"; 3 | import PyInputBox from "./py-input-box"; 4 | import type { PyInputBoxProperties, PyInputBoxTag } from "./py-input-box.types"; 5 | 6 | export default { 7 | component: PyInputBox, 8 | } as Meta; 9 | 10 | const Template: StoryFn = ({ 11 | ...rest 12 | }: PyInputBoxProperties): JSX.Element => { 13 | return ( 14 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const PyInputBoxExample: StoryFn = Template.bind({}); 24 | 25 | PyInputBoxExample.args = { 26 | children: "Example title", 27 | }; 28 | -------------------------------------------------------------------------------- /source/library/components/py-input-box/py-input-box.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-input-box/py-input-box.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-input-box/py-input-box.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import { forwardRef, type ForwardedRef } from "react"; 3 | import type { PyInputBoxProperties, PyInputBoxTag } from "./py-input-box.types"; 4 | 5 | /** 6 | * @param root0 7 | * @param root0.children 8 | * @deprecated 9 | */ 10 | const PyInputBox: PyInputBoxTag = forwardRef( 11 | ( 12 | { children, ...rest }: PyInputBoxProperties, 13 | reference: ForwardedRef | undefined, 14 | // eslint-disable-next-line max-params 15 | ): JSX.Element => { 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | }, 22 | ) as PyInputBoxTag; 23 | 24 | PyInputBox.displayName = "PyInputBox"; 25 | 26 | PyInputBox.propTypes = { 27 | children: propTypes.string.isRequired, 28 | }; 29 | 30 | export default PyInputBox; 31 | -------------------------------------------------------------------------------- /source/library/components/py-input-box/py-input-box.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | DetailedHTMLProps, 3 | ForwardedRef, 4 | HTMLAttributes, 5 | WeakValidationMap, 6 | } from "react"; 7 | import type ReactElementProps from "~types/react-element-properties/react-element-properties"; 8 | 9 | export type PyInputBoxPropertiesBase = Omit< 10 | ReactElementProps< 11 | DetailedHTMLProps, HTMLElement> 12 | >, 13 | "children" 14 | > & { 15 | children: string; 16 | }; 17 | 18 | export type PyInputBoxProperties = 19 | OptionalProperties extends infer OptionalProperties 20 | ? OptionalProperties & PyInputBoxPropertiesBase 21 | : PyInputBoxPropertiesBase; 22 | 23 | export type PyInputBoxTag = { 24 | ( 25 | properties: PyInputBoxProperties, 26 | reference?: ForwardedRef, 27 | ): JSX.Element; 28 | displayName?: string; 29 | defaultProps?: Partial; 30 | propTypes?: WeakValidationMap; 31 | }; 32 | -------------------------------------------------------------------------------- /source/library/components/py-loader/index.ts: -------------------------------------------------------------------------------- 1 | import PyLoader from "~components/py-loader/py-loader"; 2 | import type { 3 | PyLoaderProperties, 4 | PyLoaderPropertiesBase, 5 | PyLoaderProps, 6 | PyLoaderTag, 7 | } from "~components/py-loader/py-loader.types"; 8 | 9 | export type { 10 | PyLoaderPropertiesBase, 11 | PyLoaderProperties, 12 | PyLoaderProps, 13 | PyLoaderTag, 14 | }; 15 | export default PyLoader; 16 | -------------------------------------------------------------------------------- /source/library/components/py-loader/py-loader.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import PyScriptProvider from "~root/source/library/components/py-script-provider/py-script-provider"; 3 | import PyLoader from "./py-loader"; 4 | import type { PyLoaderProperties, PyLoaderTag } from "./py-loader.types"; 5 | 6 | export default { 7 | component: PyLoader, 8 | } as Meta; 9 | 10 | const Template: StoryFn = ({ 11 | ...rest 12 | }: PyLoaderProperties): JSX.Element => { 13 | return ( 14 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const PyLoaderExample: StoryFn = Template.bind({}); 24 | 25 | PyLoaderExample.args = {}; 26 | -------------------------------------------------------------------------------- /source/library/components/py-loader/py-loader.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-loader/py-loader.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-loader/py-loader.tsx: -------------------------------------------------------------------------------- 1 | import { forwardRef, type ForwardedRef } from "react"; 2 | import type { PyLoaderProperties, PyLoaderTag } from "./py-loader.types"; 3 | 4 | /** 5 | * @param root0 6 | * @deprecated 7 | */ 8 | const PyLoader: PyLoaderTag = forwardRef( 9 | ( 10 | properties: PyLoaderProperties, 11 | reference: ForwardedRef | undefined, 12 | // eslint-disable-next-line max-params 13 | ): JSX.Element => { 14 | return ; 15 | }, 16 | ) as PyLoaderTag; 17 | 18 | PyLoader.displayName = "PyLoader"; 19 | 20 | export default PyLoader; 21 | -------------------------------------------------------------------------------- /source/library/components/py-loader/py-loader.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | DetailedHTMLProps, 3 | ForwardedRef, 4 | HTMLAttributes, 5 | WeakValidationMap, 6 | } from "react"; 7 | import type ReactElementProps from "~types/react-element-properties/react-element-properties"; 8 | 9 | export type PyLoaderPropertiesBase = Omit< 10 | ReactElementProps< 11 | DetailedHTMLProps, HTMLElement> 12 | >, 13 | "children" 14 | >; 15 | 16 | export type PyLoaderProperties = 17 | OptionalProperties extends infer OptionalProperties 18 | ? OptionalProperties & PyLoaderPropertiesBase 19 | : PyLoaderPropertiesBase; 20 | 21 | export type PyLoaderProps = 22 | PyLoaderProperties; 23 | 24 | export type PyLoaderTag = { 25 | ( 26 | properties: PyLoaderProperties, 27 | reference?: ForwardedRef, 28 | ): JSX.Element; 29 | displayName?: string; 30 | defaultProps?: Partial; 31 | propTypes?: WeakValidationMap; 32 | }; 33 | -------------------------------------------------------------------------------- /source/library/components/py-register-widget/index.ts: -------------------------------------------------------------------------------- 1 | import PyRegisterWidget from "./py-register-widget"; 2 | import type { 3 | PyRegisterWidgetProperties, 4 | PyRegisterWidgetPropertiesBase, 5 | PyRegisterWidgetTag, 6 | } from "./py-register-widget.types"; 7 | 8 | export type { 9 | PyRegisterWidgetPropertiesBase, 10 | PyRegisterWidgetProperties, 11 | PyRegisterWidgetTag, 12 | }; 13 | export default PyRegisterWidget; 14 | -------------------------------------------------------------------------------- /source/library/components/py-register-widget/py-register-widget.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import PyScriptProvider from "~root/source/library/components/py-script-provider/py-script-provider"; 3 | import PyRegisterWidget from "./py-register-widget"; 4 | import type { 5 | PyRegisterWidgetProperties, 6 | PyRegisterWidgetTag, 7 | } from "./py-register-widget.types"; 8 | 9 | export default { 10 | component: PyRegisterWidget, 11 | } as Meta; 12 | 13 | const Template: StoryFn = ({ 14 | ...rest 15 | }: PyRegisterWidgetProperties): JSX.Element => { 16 | return ( 17 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export const PyRegisterWidgetExample: StoryFn = 27 | Template.bind({}); 28 | 29 | PyRegisterWidgetExample.args = { 30 | src: "/folium_map.py", 31 | }; 32 | -------------------------------------------------------------------------------- /source/library/components/py-register-widget/py-register-widget.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-register-widget/py-register-widget.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-register-widget/py-register-widget.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import { forwardRef, type ForwardedRef } from "react"; 3 | 4 | import type { 5 | PyRegisterWidgetProperties, 6 | PyRegisterWidgetTag, 7 | } from "./py-register-widget.types"; 8 | 9 | /** 10 | * @param root0 11 | * @param root0.name 12 | * @param root0.src 13 | * @param root0.pythonClass 14 | * @deprecated 15 | */ 16 | const PyRegisterWidget: PyRegisterWidgetTag = forwardRef( 17 | ( 18 | { 19 | name, 20 | src, 21 | pythonClass, 22 | ...rest 23 | }: PyRegisterWidgetProperties, 24 | reference: ForwardedRef | undefined, 25 | // eslint-disable-next-line max-params 26 | ): JSX.Element => { 27 | return ( 28 | 35 | ); 36 | }, 37 | ) as PyRegisterWidgetTag; 38 | 39 | PyRegisterWidget.displayName = "PyRegisterWidget"; 40 | 41 | PyRegisterWidget.propTypes = { 42 | name: propTypes.string, 43 | src: propTypes.string.isRequired, 44 | pythonClass: propTypes.string, 45 | }; 46 | 47 | export default PyRegisterWidget; 48 | -------------------------------------------------------------------------------- /source/library/components/py-register-widget/py-register-widget.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | DetailedHTMLProps, 3 | ForwardedRef, 4 | HTMLAttributes, 5 | WeakValidationMap, 6 | } from "react"; 7 | import type ReactElementProps from "~root/source/library/types/react-element-properties/react-element-properties"; 8 | 9 | export type PyRegisterWidgetPropertiesBase = Omit< 10 | ReactElementProps< 11 | DetailedHTMLProps, HTMLElement> 12 | >, 13 | "children" 14 | > & { 15 | name?: string; 16 | src: string; 17 | pythonClass?: string; 18 | }; 19 | 20 | export type PyRegisterWidgetProperties = 21 | OptionalProperties extends infer OptionalProperties 22 | ? OptionalProperties & PyRegisterWidgetPropertiesBase 23 | : PyRegisterWidgetPropertiesBase; 24 | 25 | export type PyRegisterWidgetTag = { 26 | ( 27 | properties: PyRegisterWidgetProperties, 28 | reference?: ForwardedRef, 29 | ): JSX.Element; 30 | displayName?: string; 31 | defaultProps?: Partial; 32 | propTypes?: WeakValidationMap; 33 | }; 34 | -------------------------------------------------------------------------------- /source/library/components/py-repl/index.ts: -------------------------------------------------------------------------------- 1 | import PyRepl from "./py-repl"; 2 | import type { 3 | PyReplProperties, 4 | PyReplPropertiesBase, 5 | PyReplTag, 6 | } from "./py-repl.types"; 7 | 8 | export type { PyReplPropertiesBase, PyReplProperties, PyReplTag }; 9 | 10 | export default PyRepl; 11 | -------------------------------------------------------------------------------- /source/library/components/py-repl/py-repl.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import PyScriptProvider from "~root/source/library/components/py-script-provider/py-script-provider"; 3 | import PyRepl from "./py-repl"; 4 | import type { PyReplProperties, PyReplTag } from "./py-repl.types"; 5 | 6 | export default { 7 | component: PyRepl, 8 | } as Meta; 9 | 10 | const Template: StoryFn = ({ 11 | ...rest 12 | }: PyReplProperties): JSX.Element => { 13 | return ( 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export const PyReplExample: StoryFn = Template.bind({}); 21 | 22 | PyReplExample.args = {}; 23 | -------------------------------------------------------------------------------- /source/library/components/py-repl/py-repl.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-repl/py-repl.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-repl/py-repl.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import { forwardRef, type ForwardedRef } from "react"; 3 | import type { PyReplProperties, PyReplTag } from "./py-repl.types"; 4 | 5 | const PyRepl: PyReplTag = forwardRef( 6 | ( 7 | { 8 | autoGenerate = false, 9 | children, 10 | ...rest 11 | }: PyReplProperties, 12 | reference: ForwardedRef | undefined, 13 | // eslint-disable-next-line max-params 14 | ): JSX.Element => { 15 | return ( 16 | 17 | {children} 18 | 19 | ); 20 | }, 21 | ) as PyReplTag; 22 | 23 | PyRepl.displayName = "PyRepl"; 24 | 25 | PyRepl.propTypes = { 26 | children: propTypes.string, 27 | autoGenerate: propTypes.bool, 28 | }; 29 | 30 | export default PyRepl; 31 | -------------------------------------------------------------------------------- /source/library/components/py-repl/py-repl.types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | DetailedHTMLProps, 3 | ForwardedRef, 4 | HTMLAttributes, 5 | WeakValidationMap, 6 | } from "react"; 7 | import ReactElementProps from "~types/react-element-properties/react-element-properties"; 8 | 9 | export type PyReplPropertiesBase = Omit< 10 | ReactElementProps< 11 | DetailedHTMLProps, HTMLElement> 12 | >, 13 | "children" 14 | > & { 15 | autoGenerate?: boolean; 16 | children?: string; 17 | }; 18 | 19 | export type PyReplProperties = 20 | OptionalProperties extends infer OptionalProperties 21 | ? OptionalProperties & PyReplPropertiesBase 22 | : PyReplPropertiesBase; 23 | 24 | export type PyReplTag = { 25 | ( 26 | properties: PyReplProperties, 27 | reference?: ForwardedRef, 28 | ): JSX.Element; 29 | displayName?: string; 30 | defaultProps?: Partial; 31 | propTypes?: WeakValidationMap; 32 | }; 33 | -------------------------------------------------------------------------------- /source/library/components/py-script-provider-zustand-wrapper/index.ts: -------------------------------------------------------------------------------- 1 | import PyScriptProviderZustandWrapper from "./py-script-provder-zustand-wrapper"; 2 | import type { PyScriptProviderZustandWrapperProperties } from "./py-script-provider-zustand-wrapper.types"; 3 | 4 | export type { PyScriptProviderZustandWrapperProperties }; 5 | 6 | export default PyScriptProviderZustandWrapper; 7 | -------------------------------------------------------------------------------- /source/library/components/py-script-provider-zustand-wrapper/py-script-provder-zustand-wrapper.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import type { FC } from "react"; 3 | import type { PyScriptProviderZustandWrapperProperties } from "~components/py-script-provider-zustand-wrapper/py-script-provider-zustand-wrapper.types"; 4 | import { PyScriptProviderProperties } from "~components/py-script-provider/py-script-provider.types"; 5 | import usePyScriptStore from "../../stores/py-script-store/py-script-store"; 6 | import PyScriptProvider from "../py-script-provider/py-script-provider"; 7 | 8 | const PyScriptProviderZustandWrapper: FC< 9 | PyScriptProviderZustandWrapperProperties 10 | > = ({ 11 | children, 12 | ...rest 13 | }: PyScriptProviderZustandWrapperProperties): JSX.Element => { 14 | const { setPyScript } = usePyScriptStore(); 15 | return ( 16 | 20 | {children} 21 | 22 | ); 23 | }; 24 | 25 | PyScriptProviderZustandWrapper.propTypes = { 26 | cssSrc: propTypes.string, 27 | jsSrc: propTypes.string, 28 | cssSource: propTypes.string, 29 | jsSource: propTypes.string, 30 | children: propTypes.oneOfType([ 31 | propTypes.arrayOf(propTypes.node), 32 | propTypes.node, 33 | ]).isRequired, 34 | helmetProps: propTypes.object, 35 | helmetProperties: propTypes.object, 36 | helmetProviderProps: propTypes.object, 37 | helmetProviderProperties: propTypes.object, 38 | }; 39 | 40 | export default PyScriptProviderZustandWrapper; 41 | -------------------------------------------------------------------------------- /source/library/components/py-script-provider-zustand-wrapper/py-script-provider-zustand-wrapper.types.ts: -------------------------------------------------------------------------------- 1 | import { PyScriptProviderProperties } from "~root/source/library/components/py-script-provider/py-script-provider.types"; 2 | 3 | export type PyScriptProviderZustandWrapperProperties = Omit< 4 | PyScriptProviderProperties, 5 | "setPyScript" 6 | >; 7 | -------------------------------------------------------------------------------- /source/library/components/py-script-provider/index.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | PyScriptProviderProperties, 3 | PyScriptProviderPropertiesBase, 4 | PyScriptProviderPropertiesWithCSSPropertiesFullname, 5 | PyScriptProviderPropertiesWithCSSSourceFullname, 6 | PyScriptProviderPropertiesWithHelmetPropertiesFullname, 7 | PyScriptProviderPropertiesWithHelmetProviderPropertiesFullname, 8 | PyScriptProviderPropertiesWithJSPropertiesFullname, 9 | PyScriptProviderPropertiesWithJSourceFullname, 10 | PyScriptProviderPropertiesWithoutCSSPropertiesFullname, 11 | PyScriptProviderPropertiesWithoutCSSSourceFullname, 12 | PyScriptProviderPropertiesWithoutHelmetPropertiesFullname, 13 | PyScriptProviderPropertiesWithoutHelmetProviderPropertiesFullname, 14 | PyScriptProviderPropertiesWithoutJSPropertiesFullname, 15 | PyScriptProviderPropertiesWithoutJSourceFullname, 16 | } from "~components/py-script-provider/py-script-provider.types"; 17 | import PyScriptProvider from "./py-script-provider"; 18 | 19 | export type { 20 | PyScriptProviderPropertiesBase, 21 | PyScriptProviderPropertiesWithCSSSourceFullname, 22 | PyScriptProviderPropertiesWithoutCSSSourceFullname, 23 | PyScriptProviderPropertiesWithJSourceFullname, 24 | PyScriptProviderPropertiesWithoutJSourceFullname, 25 | PyScriptProviderPropertiesWithoutCSSPropertiesFullname, 26 | PyScriptProviderPropertiesWithCSSPropertiesFullname, 27 | PyScriptProviderPropertiesWithJSPropertiesFullname, 28 | PyScriptProviderPropertiesWithoutJSPropertiesFullname, 29 | PyScriptProviderPropertiesWithoutHelmetPropertiesFullname, 30 | PyScriptProviderPropertiesWithHelmetPropertiesFullname, 31 | PyScriptProviderPropertiesWithHelmetProviderPropertiesFullname, 32 | PyScriptProviderPropertiesWithoutHelmetProviderPropertiesFullname, 33 | PyScriptProviderProperties, 34 | }; 35 | 36 | export default PyScriptProvider; 37 | -------------------------------------------------------------------------------- /source/library/components/py-script-provider/py-script-provider.story.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryFn } from "@storybook/react"; 2 | import type { FunctionComponent } from "react"; 3 | import PyScriptProvider from "./py-script-provider"; 4 | import type { PyScriptProviderProperties } from "./py-script-provider.types"; 5 | 6 | export default { 7 | component: PyScriptProvider, 8 | } as Meta; 9 | 10 | const Template: StoryFn> = ({ 11 | ...rest 12 | }: PyScriptProviderProperties): JSX.Element => { 13 | return 123; 14 | }; 15 | 16 | export const PyScriptProviderExample: StoryFn = 17 | Template.bind({}); 18 | 19 | PyScriptProviderExample.args = {}; 20 | -------------------------------------------------------------------------------- /source/library/components/py-script-provider/py-script-provider.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Py4Js/pyscript-react/16b18f9174484cb4b360d64ead227d20fb6c18d3/source/library/components/py-script-provider/py-script-provider.test.tsx -------------------------------------------------------------------------------- /source/library/components/py-script-provider/py-script-provider.tsx: -------------------------------------------------------------------------------- 1 | import propTypes from "prop-types"; 2 | import { 3 | memo, 4 | useEffect, 5 | useRef, 6 | type FC, 7 | type WeakValidationMap, 8 | } from "react"; 9 | import { Helmet, HelmetProvider } from "react-helmet-async"; 10 | import type { PyScriptProviderProperties } from "./py-script-provider.types"; 11 | 12 | const PyScriptProvider: FC = ({ 13 | cssSrc = "https://pyscript.net/latest/pyscript.css", 14 | cssSource, 15 | jsSrc = "https://pyscript.net/latest/pyscript.js", 16 | jsSource, 17 | children, 18 | cssProps, 19 | cssProperties, 20 | jsProperties, 21 | jsProps, 22 | helmetProps, 23 | helmetProperties, 24 | helmetProviderProps, 25 | helmetProviderProperties, 26 | setPyScript, 27 | }: PyScriptProviderProperties): JSX.Element => { 28 | const timer = useRef(null); 29 | useEffect(() => { 30 | if (setPyScript) { 31 | timer.current = setInterval(() => { 32 | if (window.pyscript) { 33 | setPyScript(window.pyscript); 34 | timer.current && clearInterval(timer.current); 35 | } 36 | }, 10); 37 | } 38 | return () => { 39 | timer.current && clearInterval(timer.current); 40 | }; 41 | }, [setPyScript]); 42 | return ( 43 | 44 | 45 | 50 |