Skip to content

Commit

Permalink
WIP: Adding sample code for typescript/react
Browse files Browse the repository at this point in the history
  • Loading branch information
ChiaMineJP committed May 14, 2024
1 parent 12921b9 commit 3186bd8
Show file tree
Hide file tree
Showing 20 changed files with 3,814 additions and 4 deletions.
9 changes: 6 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,10 @@ you need to put `blsjs.wasm` to the same directory as the code who loads `clvm`.
└── clvm_wasm_bg.wasm # copy it from npm_modules/clvm/browser/clvm_wasm_bg.wasm
</pre>

If you use [React](https://reactjs.org/), copy `blsjs.wasm` and `clvm_wasm_bg.wasm` into `<react-project-root>/public/static/js/` folder. It automatically copies wasm file next to main js file.
If you use [React](https://reactjs.org/) with [CRA(create-react-app)](https://github.com/facebook/create-react-app), copy `blsjs.wasm` and `clvm_wasm_bg.wasm` into `<react-project-root>/public/static/js/` folder. It automatically copies wasm file next to main js file.

If you use [React](https://reactjs.org/) with [vite](https://vitejs.dev/),
copy `blsjs.wasm` and `clvm_wasm_bg.wasm` into `<react-project-root>/public/assets/` folder.

**Note1**
Don't forget to wait `clvm.initialize()`.
Expand All @@ -93,8 +96,8 @@ Just copy and paste below to your `package.json` and you can avoid a lot of runt
"and_chr >= 67",
"and_ff >= 68",
"samsung >= 9.2",
"node >= 18.0.0",
"electron >= 23.0.0"
"node >= 10.4.0",
"electron >= 4.0.0"
]
```

Expand Down
74 changes: 74 additions & 0 deletions example/typescript_react/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
[*]
charset=utf-8
end_of_line=lf
trim_trailing_whitespace=false
insert_final_newline=false
indent_style=space
indent_size=2

[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
indent_style=space
indent_size=2

[{.eslintrc,.prettierrc,.babelrc,jest.config,.stylelintrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
indent_style=space
indent_size=2

[*.svg]
indent_style=space
indent_size=2

[*.css]
indent_style=space
indent_size=2

[*.scss]
indent_style=space
indent_size=2

[*.styl]
indent_style=space
indent_size=2

[*.js]
indent_style=space
indent_size=2

[{*.ats,*.ts}]
indent_style=space
indent_size=2
ij_typescript_import_use_node_resolution = false

[*.tsx]
indent_style=space
indent_size=2
ij_typescript_import_use_node_resolution = false

[{*.mjs,*.es6}]
indent_style=space
indent_size=2

[*.js.flow]
indent_style=space
indent_size=2

[*.jsx]
indent_style=space
indent_size=2

[{jshint.json,*.jshintrc}]
indent_style=space
indent_size=2

[{tsconfig.e2e.json,tsconfig.spec.json,tsconfig.app.json,tsconfig.json}]
indent_style=space
indent_size=2

[*.js.map]
indent_style=space
indent_size=2

[{.analysis_options,*.yml,*.yaml}]
indent_style=space
indent_size=2

262 changes: 262 additions & 0 deletions example/typescript_react/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
module.exports = {
root: true,
env: {browser: true, es2020: true},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/strict-type-checked',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/stylistic-type-checked',
'plugin:react/recommended',
'plugin:react/jsx-runtime'
],
ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'release.js', 'src/vite-env.d.ts'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
plugins: ['react-refresh', '@typescript-eslint', 'import'],
rules: {
'react-refresh/only-export-components': [
'warn',
{allowConstantExport: true},
],
'react-hooks/rules-of-hooks': 0,
'react-hooks/exhaustive-deps': 2,
'@typescript-eslint/array-type': [
'error',
{
'default': 'array-simple'
}
],
'@typescript-eslint/ban-types': [
'error',
{
'types': {
'Object': {
'message': 'Avoid using the `Object` type. Did you mean `object`?'
},
'Function': {
'message': 'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.'
},
'Boolean': {
'message': 'Avoid using the `Boolean` type. Did you mean `boolean`?'
},
'Number': {
'message': 'Avoid using the `Number` type. Did you mean `number`?'
},
'String': {
'message': 'Avoid using the `String` type. Did you mean `string`?'
},
'Symbol': {
'message': 'Avoid using the `Symbol` type. Did you mean `symbol`?'
}
}
}
],
'@typescript-eslint/consistent-type-assertions': 'error',
'@typescript-eslint/consistent-type-definitions': 'off',
'@typescript-eslint/dot-notation': 'warn',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/indent': [
'error',
2,
{
'SwitchCase': 1,
'ObjectExpression': 'first',
'FunctionDeclaration': {
'parameters': 'first'
},
'FunctionExpression': {
'parameters': 'first'
},
'ignoredNodes': [
'TSTypeParameterInstantiation',
'JSXElement *',
'JSXElement'
]
}
],
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/member-ordering': 'off',
'@typescript-eslint/naming-convention': [
'error',
{
'selector': 'variable',
'format': [
'camelCase',
'PascalCase',
'UPPER_CASE'
],
'leadingUnderscore': 'allow'
},
{
'selector': 'typeLike',
'format': ['PascalCase']
},
{
'selector': 'memberLike',
'modifiers': ['private'],
'format': ['camelCase'],
'leadingUnderscore': 'require'
}
],
'@typescript-eslint/no-empty-function': 'error',
'@typescript-eslint/no-empty-interface': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-inferrable-types': 'off',
'@typescript-eslint/no-misused-new': 'error',
'@typescript-eslint/no-misused-promises': 'off',
'@typescript-eslint/no-namespace': 'error',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-parameter-properties': 'off',
'@typescript-eslint/no-this-alias': [
'error',
{
'allowDestructuring': true
}
],
'@typescript-eslint/no-unused-expressions': 'error',
'@typescript-eslint/no-unused-vars': [
'error',
{
'args': 'none'
}
],
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/no-var-requires': 'error',
'@typescript-eslint/prefer-for-of': 'off',
'@typescript-eslint/prefer-function-type': 'error',
'@typescript-eslint/prefer-namespace-keyword': 'error',
'@typescript-eslint/prefer-nullish-coalescing': ['off'],
'@typescript-eslint/triple-slash-reference': [
'error',
{
'path': 'always',
'types': 'prefer-import',
'lib': 'always'
}
],
'@typescript-eslint/unified-signatures': 'error',
'arrow-parens': [
'off',
'always'
],
'brace-style': [
'off',
'off'
],
'complexity': 'off',
'constructor-super': 'error',
'eqeqeq': [
'error',
'smart'
],
'guard-for-in': 'error',
'id-match': 'error',
'import/no-extraneous-dependencies': 'error',
'import/no-internal-modules': [
'off',
{
'allow': [
'excluded-module1/*',
'excluded-module2/*'
]
}
],
'import/no-unresolved': 'error',
'import/order': 'off',
'max-classes-per-file': 'off',
'max-len': [
'error',
{
'ignorePattern': '//|^import |^export ',
'code': 140
}
],
'new-parens': 'error',
'no-bitwise': 'error',
'no-caller': 'error',
'no-cond-assign': 'error',
'no-console': 'off',
'no-debugger': 'error',
'no-duplicate-case': 'error',
'no-duplicate-imports': 'error',
'no-empty': 'error',
'no-eval': 'error',
'no-extra-bind': 'error',
'no-fallthrough': 'off',
'no-invalid-this': 'off',
'no-multiple-empty-lines': 'off',
'no-new-func': 'error',
'no-new-wrappers': 'error',
'no-redeclare': 'error',
'no-return-await': 'error',
'no-sequences': 'error',
'no-shadow': [
'error',
{
'hoist': 'all'
}
],
'no-sparse-arrays': 'error',
'no-template-curly-in-string': 'error',
'no-throw-literal': 'error',
'no-trailing-spaces': [
'error',
{
'ignoreComments': true,
'skipBlankLines': true
}
],
'no-undef-init': 'error',
'no-underscore-dangle': 'off',
'no-unsafe-finally': 'error',
'no-unused-labels': 'error',
'no-var': 'error',
'object-shorthand': 'off',
'one-var': [
'error',
'never'
],
'prefer-const': 'error',
'prefer-object-spread': 'error',
'quotes': [
'error',
'single'
],
'radix': 'error',
'react/jsx-key': 'error',
'react/jsx-no-bind': 'error',
'react/no-string-refs': 'error',
'react/prop-types': 'off',
'react/self-closing-comp': 'error',
'space-in-parens': [
'error',
'never'
],
'spaced-comment': [
'error',
'always',
{
'markers': [
'/'
]
}
],
'use-isnan': 'error',
'valid-typeof': 'error'
},
settings: {
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx']
},
'import/resolver': {
'typescript': {
'alwaysTryTypes': true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
}
}
}
}
23 changes: 23 additions & 0 deletions example/typescript_react/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
# .env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
Loading

0 comments on commit 3186bd8

Please sign in to comment.