alioguzhan / react-typescript-library Goto Github PK

View Code? Open in Web Editor NEW

32.0 32.0 8.0 2.09 MB

A template to create a React component / library with Typescript

License: MIT License

JavaScript 29.81% TypeScript 66.61% Shell 1.26% CSS 0.32% Nix 2.01%

react react-library react-typescript-module typescript

react-typescript-library's People

Contributors

Stargazers

Watchers

Forkers

monksoul hirol888 segore leandroswq forking-project miketatsky silvareal guhyeon

react-typescript-library's Issues

Future Request : Example App with typescript Template

In tools/init.ts you can question it to user of this Repository.
Question : Would you like to TypeScript for Testing Library?
ANSWER : Boolean if yes install Typescript Template if no install JavaScript Template

Additional

i hope you understand this Consept
If you don't understand comment here as
I not understand to i will open pull request.

Thank You
@MeetBhingradiya

How to Solve having more than one copy of React in the same app

Describe the bug

I'm developing a React module locally. For that, I'm linking my module using npm link. The module is imported successfully but hooks are failing inside the module. It's throwing the following error:

react.development.js:205 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

i not any kind of break react rules and i have same version of react and react-dom in test folder

To Reproduce

I don't have any type of knowledge.

Expected behavior
Authorise my Created RouteLocker replace with route and appears component that passed in my Library.

Screenshots

Console
Json File of Package

{
    "name": "react-route-locker",
    "version": "1.0.0",
    "keywords": [],
    "description": "",
    "main": "dist/index.min.js",
    "module": "dist/index.es.js",
    "types": "dist/index.d.ts",
    "files": [
        "dist"
    ],
    "author": "Meet Bhingradiya",
    "repository": {
        "url": "",
        "type": "git"
    },
    "homepage": "",
    "license": "MIT",
    "private": true,
    "scripts": {
        "start": "rollup -c rollup.config.js -w",
        "build": "tsc && rollup -c rollup.config.js && yarn make:docs",
        "make:docs": "typedoc",
        "coverage": "codecov -e TRAVIS_NODE_VERSION -f coverage/*.json",
        "test": "jest --coverage",
        "test:watch": "jest --coverage --watch",
        "test:ci": "cross-env CI=1 jest",
        "predeploy": "cd example && yarn install && yarn run build",
        "deploy": "gh-pages -d example/build",
        "postinstall": "ts-node tools/init",
        "prepare": "husky install"
    },
    "engines": {
        "node": ">=14"
    },
    "peerDependencies": {
        "react": ">=17",
        "react-dom": ">=17"
    },
    "devDependencies": {
        "@commitlint/cli": "^17.1.2",
        "@commitlint/config-conventional": "^17.1.0",
        "@rollup/plugin-commonjs": "^22.0.2",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-node-resolve": "^13.3.0",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@types/jest": "^29.0.0",
        "@types/node": "^18.7.15",
        "@types/react": "^18.0.18",
        "@types/react-dom": "^18.0.6",
        "@typescript-eslint/eslint-plugin": "^5.36.1",
        "@typescript-eslint/parser": "^5.36.1",
        "colors": "^1.4.0",
        "cross-env": "^7.0.3",
        "eslint": "^8.23.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.2.5",
        "eslint-plugin-promise": "^6.0.1",
        "eslint-plugin-react": "^7.31.6",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-standard": "^5.0.0",
        "gh-pages": "^4.0.0",
        "husky": "^8.0.1",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^29.0.2",
        "jest-environment-jsdom": "^29.0.2",
        "lint-staged": "^13.0.3",
        "postcss": "^8.4.16",
        "prompt": "^1.3.0",
        "react-router-dom": "^6.4.4",
        "replace-in-file": "^6.3.5",
        "rollup": "^2.79.0",
        "rollup-plugin-peer-deps-external": "^2.2.4",
        "rollup-plugin-postcss": "^4.0.2",
        "rollup-plugin-sourcemaps": "^0.6.3",
        "rollup-plugin-terser": "^7.0.2",
        "rollup-plugin-typescript2": "^0.33.0",
        "ts-jest": "^28.0.8",
        "ts-node": "^10.9.1",
        "typedoc": "^0.23.14",
        "typescript": "^4.8.2"
    },
    "lint-staged": {
        "src/**/*.{ts,tsx}": [
            "./node_modules/.bin/prettier --write",
            "./node_modules/.bin/eslint"
        ]
    }
}

test package

{
  "name": "test-app-route-locker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.4",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-route-locker": "file:..",
    "react-router-dom": "^6.4.4",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "typescript": "^4.9.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.26"
  }
}

What i doing in App.tsx in test app [Click on the image to open in new tab]

Environment (please complete the following information):

OS: [Microsoft Windows 10 Pro]
Node version : v18.12.0

More Information on Stackoverflow

StackOverflow Question Link

Help i do not understand Answer that owner Accepted.

You can Get More Information about MyLibrary react-route-locker on npm OR yarn

More than one copy of React in [Test App]

Describe the bug

Actually this is not Bug but need to add in rollup.config.js.
This is Link of Stackoverflow
in Second Answers You see as Webpack he added external version of React so i don't know how to add in rollup.config.js
This is Future Bug of this repo so that i informed through this Issue Report

How I Discovered this Error in My TestApp and TestLibrary ?
I am creating Powerful Route Authorization Library that has Prevention from

Browsers
Devices
OS
AuthState
RoleState
Automatic Role by Role Redirect through after login [admin => /admin/dashboard , user => /home , vip => /home/vip ect.]
IP , Bots etc.

This Library already i created and working fine in local file as part of every react app.
i need to clear one and only this error that i seen 3 months ago and still seeing.
i tryed every working library like react-router-dom, Muicore , 7+ teamplates but this repo has give me some confidence that i can transform it so please help me ! with ping heare

Thanks for Read and give me your valuable time.

shelljs required on build

Describe the bug
shelljs is a requirement for husky to execute its checks

To Reproduce

after checking out the repository and
hitting yarn -> fails.

Expected behavior
build to run successfully without manually installing shelljs

Log Output

[5/5] Building fresh packages...
success Saved lockfile.
$ husky install
husky - Git hooks installed
Done in 20.01s.
internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module './node_modules/shelljs/src/exec-child.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Environment (please complete the following information):

OS: Linux, NixOS 22.05
Node version: v14.19.3

I followed the document steps, but the following error occurred.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.