1.24.0 • Published 3 years ago
singlefileapproach v1.24.0
singlefileapproach
This is a trial approach for building a treeshakable npm package for EOS-Icons which can be utilised by React (TypeScript and JavaScript supported).
How to publish package:
npm install
npm run publish
How to test package:
JavaScript:
npm install
npm run test:js
TypeScript:
npm install
npm run test:ts
Explanation of npm scripts:
//Runs gulpfile for fetching SVG files from 'eos-icons' and also copies utility functions to build folder
"generate": "TS_NODE_PROJECT=tsIconConfig.json gulp --require ts-node/register/transpile-only",
//Runs script for scaffolding TypeScript SVG component into src/icon - filled
"script:filled": "TS_NODE_PROJECT=config/tsconfig.json node -r ts-node/register scripts/index.ts --target=filled",
//Runs script for scaffolding TypeScript SVG component into src/icon - outlined
"script:outlined": "TS_NODE_PROJECT=config/tsconfig.json node -r ts-node/register scripts/index.ts --target=outlined",
//Runs script for scaffolding TypeScript SVG component into src/icon - animated
"script:animated": "TS_NODE_PROJECT=config/tsconfig.json node -r ts-node/register scripts/index.ts --target=animated",
//Runs all the scaffolding script
"icon:generate": "mkdir -p src/icon && npm run script:filled && npm run script:animated && npm run script:outlined",
//builds for publishing in esnext
"build:es": "tsc --project tsconfig.build.json --module esnext --outDir es",
//builds for publishing in cjs
"build:lib": "tsc --project tsconfig.build.json --module commonjs --outDir lib",
//Runs both build commands
"build": "npm run build:es && npm run build:lib",
//Runs gulpfile, scaffolding scripts and build command
"publish": "npm run generate && npm run icon:generate && npm run build",
//For testing in TypeScript
"test:ts": "npm run publish && cd ./typescript-test-project && yarn install && npm run start",
//For testing in JavaScript
"test:js": "npm run publish && cd ./javascript-test-project && yarn install && npm run start"
Explanation of building process:
- GulpFile fetches icons from 'Eos-Icons' npm package and places them in a folder named: 'svg'.
- The scripts use the content of SVG files for scaffolding TypeScript React components in src/icon.
- The script also produces a common index.ts file which exports all the icons.
- Finally the build command builds all the files in es and cjs format in lib and es respectively.
- semantic release is setup in this repo and a commit containing "fix", "feat" or "perf" publishes the package on npm. (semantic naming can be modified)
1.23.0
3 years ago
1.24.0
3 years ago
1.22.2
3 years ago
1.22.1
3 years ago
1.21.0
3 years ago
1.22.0
3 years ago
1.15.0
3 years ago
1.14.0
3 years ago
1.13.0
3 years ago
1.12.0
3 years ago
1.19.0
3 years ago
1.18.0
3 years ago
1.17.0
3 years ago
1.16.0
3 years ago
1.20.0
3 years ago
1.11.0
3 years ago
1.10.0
3 years ago
1.9.0
3 years ago
1.8.0
3 years ago
1.7.0
3 years ago
1.6.0
3 years ago
1.5.0
3 years ago
1.4.0
3 years ago
1.3.0
3 years ago
1.2.0
3 years ago
1.1.0
3 years ago
1.0.0
3 years ago