Skip to content

Commit 3e1e50f

Browse files
KrzysztofZawislaKrzysztofZawisla
committed
Added documentation
1 parent 2b68d12 commit 3e1e50f

File tree

7 files changed

+184
-6
lines changed

7 files changed

+184
-6
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: 1
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: 2
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: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const config: Config = {
1414
baseUrl: "/",
1515
onBrokenLinks: "throw",
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",

0 commit comments

Comments
 (0)