Skip to content

Commit 74d361e

Browse files
KrzysztofZawislaKrzysztofZawisla
authored
Merge pull request #1325 from Py4Js/feature/documentation
Feature/documentation
2 parents 33145f6 + 28c9eeb commit 74d361e

File tree

9 files changed

+302
-14
lines changed

9 files changed

+302
-14
lines changed

‎documentation/docs/advanced/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Advanced",
3+
"position": 3,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "This section explains advanced things"
7+
}
8+
}

‎documentation/docs/advanced/specific-module-installation.mdx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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 diffrent 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+
```

‎documentation/docs/get-started/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
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+
}

‎documentation/docs/get-started/concept.mdx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
sidebar_position: 2
3+
title: Concept
4+
---
5+
6+
# Concept
7+
8+
PyScript-React builds to diffrent 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+
```

‎documentation/docs/get-started/quick-start.mdx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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+
```

‎documentation/docs/intro.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
---
22
sidebar_position: 1
3+
title: Introduction
34
---
45

5-
123
6+
# Introduction
7+
8+
PyScript-React is a wrapper around [PyScript](https://github.com/pyscript/pyscript) for [React](https://github.com/facebook/react). Idea behind that library is to simplify process to embed PyScript in our React application.
9+
10+
## Why PyScript-React?

‎documentation/docusaurus.config.ts

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,10 @@ const githubLink = "https://github.com/Py4Js/pyscript-react";
1010
const config: Config = {
1111
title: `${organizationName} Documentation`,
1212
tagline: `${organizationName} Documentation`,
13-
url: "https://pyscript-react.github.io",
14-
baseUrl: "/",
15-
onBrokenLinks: "throw",
13+
url: "https://py4js.github.io/",
14+
baseUrl: "/pyscript-react/",
15+
onBrokenLinks: "warn",
1616
onBrokenMarkdownLinks: "warn",
17-
favicon: "img/favicon.ico",
1817
organizationName,
1918
projectName: organizationName,
2019
i18n: {
@@ -39,10 +38,6 @@ const config: Config = {
3938
themeConfig: {
4039
navbar: {
4140
title: organizationName,
42-
logo: {
43-
alt: organizationName,
44-
src: "img/logo.svg",
45-
},
4641
items: [
4742
{
4843
type: "doc",

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"prepare": "husky install",
1111
"storybook": "cross-env TS_NODE_PROJECT=tsconfig.node.json storybook dev",
1212
"documentation": "cd documentation && docusaurus start",
13+
"build-documentation": "cd documentation && docusaurus build",
14+
"publish-documentation": "gh-pages -b documentation -d documentation/build",
1315
"build": "cross-env TS_NODE_PROJECT=tsconfig.node.json ts-node ./source/scripts/runner/commands/build/build.ts",
1416
"test": "cross-env jest --coverage",
1517
"lint": "cross-env TS_NODE_PROJECT=tsconfig.node.json ts-node ./source/scripts/runner/commands/lint/lint.ts",
@@ -66,6 +68,7 @@
6668
"eslint-webpack-plugin": "^4.0.1",
6769
"generate-file-webpack-plugin": "^1.0.1",
6870
"generate-package-json-webpack-plugin": "^2.6.0",
71+
"gh-pages": "^5.0.0",
6972
"glob": "^10.2.2",
7073
"husky": "^8.0.3",
7174
"jest": "^29.5.0",

0 commit comments

Comments
 (0)