Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
dyna-ts-react-module-boilerplate
Advanced tools
Readme
Webpack boilerplate for Typescript React Components to use as a module in other apps or other modules.
Develop, debug, test, Storybook, and distribute React component(s).
Replace the my-component
with the name of your new module.
git clone http://github.com/aneldev/dyna-ts-react-module-boilerplate my-component
cd my-component
yarn run create
That's all.
create-react-app
different?It is different because create-react-app
creates React applications and includes everything an application needs.
The dyna-ts-react-module-boilerplate
creates React modules (reusable components). It creates React components that will be used in React applications or other modules.
React version | Git entity | Name |
---|---|---|
15 | tag | v4.1.5 |
16 | branch | master |
17 | branch | react-v17 |
*.module.less/scss
filename pattern)undefined
or null
values)This boilerplate runs only under bash
(Linux, Mac, Windows with git bash).
Scripts of this package are not designed for the Windows command line!
For Windows users, there are multiple ways:
Export whatever you want in /src/index.tsx
line this
export { Button, IButtonProps} from "./Button.tsx";
From another package, import the Button line this:
import {Button} from "my-compoennt";
Each folder would contain components, and each component would be exported as a module. This will help the shaking tree method of webpack since your final App module won't include components that are not used.
Delete the /src/index.tsx
and under the /src
folder, each folder will be considered a module.
The Absence of the /src/index.tsx
will make the boilerplate build each folder as a module. If the /src/index.tsx
is exists, then only one module is exported.
The folder structure will be like this:
/src
/src/Button/Button.tsx
/src/Button/index.tsx // This index exports for the Button only
/src/Label/Label.tsx
/src/Label/index.tsx // This index exports for the Label only
From another package, import the Button line this:
import {Button} from "my-compoennt/dist/Button";
There are loaders for various files, like: .less
, .scss
, .svg
, .jpg
, etc.
. Loaders loaded in /webpack.loaders.js
, where you can add your loaders used for all tasks (npm scripts).
You can develop using the Storybook or create your app. In any case on yarn release
, only what is exported by src/index.tsx
will be released.
If you want to add a dependency that will be used only in a Story or in your custom app, install it as dev
dependency.
Stories are all files with extension .stories.tsx
. There is already a stories
folder, but story files would be anywhere.
yarn storybook
Or yarn storybook-at <custom port>
to open Storybook on a custom port.
If you don't want to use the Storybook, you can create your app.
Under the /dev/app/
folder, a small web application can use your module component in different ways.
This way, you can develop, debug, and create a demo of your component.
yarn start
or, if you want to start it to a different port, yarn start-to -- 3232
to start in port 3232.
Like an App, this boilerplate uses the dyna-showcase
, a very light StoryBook like solution.
One of the benefits is that it is speedy compared with StoryBook, and you can see the actual edges of the components (for high fidelity dev).
It is ideal for development, but you can easily replace it with yours, yarn remove dyna-showcase
, and write your app under the /dev
folder.
StoryBook is still available!
yarn lint
Update the tslint.json
with your preferences.
Run yarn build-analyze
and check which dependencies will be delivered in your module.
For tests, this boilerplate uses the Jest.
Test files can be anywhere but they should have a name *.(test|spec).(ts|tsx|js|jsx)
. There is a tests/
folder if you want to use it but this is not mandatory.
Call yarn test
to run your tests and coverage.
Call yarn test-watch
to run your tests after any change, with no coverage.
yarn build
Build creates your distributable version of your component under ./dist
. Typescript's declaration will be there too.
You don't need to use the build
, since the release
script calls the build
.
You will need this is if you have linked this package with another local package (like yarn link
or so).
yarn release
The output is not compressed, while it is intended to be used in other apps where it will be bundled and compressed. This also makes your component debuggable.
For private packages, where you don't want to expose them to yarn
, remove the yarn pulish
call from the publish-push
script.
You can exclude dependencies from the distributed bundle by declaring them in the /webpack.dist.config.js
. By default, all dependencies are declared there.
sync-usages
Link your modules easily with the yarn sync-usages --watch
watcher script.
In case that the yarn link
doesn't work for any reason, this boilerplate offers a "copy" approach to update the packages.
The script performs:
node_modules
of this packagesrc
&& dist
foldersyarn sync-usages
to sync it onceyarn sync-usages --watch
for run in watcher modeFor all except Mac desktops, you have to install the rsync
on your system. See below how to do it.
rsync
prerequisiteYou have to install the rsync
on your system.
The callbacks are not called only the page is refreshed. Forks are welcome.
If you are interested in a typescript module, in other words, if you want to implement everything as we do here but without any react components, check this out this dyna-ts-module-boilerplate repo.
FAQs
React Component / Module boilerplate
We found that dyna-ts-react-module-boilerplate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.