ui-components issueshttps://gitlab.linguala.com/linguala/ui-components/-/issues2021-01-06T14:29:34Zhttps://gitlab.linguala.com/linguala/ui-components/-/issues/86rollup: babel runtime bundle optimization2021-01-06T14:29:34ZTobias Thüringt.thuering@linguala.comrollup: babel runtime bundle optimizationChange from babelHelpers: 'inline' to 'runtime' and adjust dependencies & rollup external dependencies
https://gitlab.linguala.com/linguala/ui-components/-/merge_requests/132#note_7407Change from babelHelpers: 'inline' to 'runtime' and adjust dependencies & rollup external dependencies
https://gitlab.linguala.com/linguala/ui-components/-/merge_requests/132#note_7407Tobias Thüringt.thuering@linguala.comTobias Thüringt.thuering@linguala.com2021-01-13https://gitlab.linguala.com/linguala/ui-components/-/issues/60Feature: Switch to es module exports2021-06-16T18:04:19ZTobias Thüringt.thuering@linguala.comFeature: Switch to es module exportsWe currently bundle to es modules and commonjs with rollup.
This could stay, but our code has still to be transformed with babel to commonjs (`require()` syntax) or processed in storybook with webpack with es compatible module loaders i...We currently bundle to es modules and commonjs with rollup.
This could stay, but our code has still to be transformed with babel to commonjs (`require()` syntax) or processed in storybook with webpack with es compatible module loaders in storybook (related to #52 and #13).
This increases build-time and once storybook is compatible with mjs (probably @storybook/react@6.0.0), we should switch the sources to mjs file extensions to use modules natively with node 14+ for all other javascript file extensions than jsx.
## jsx
.jsx still requires a transformer to .js or .mjs.
Once storybook does not rely on the webpack package resolver (which is not compatible to native es-modules yet), we can switch fully to a non-babel setup and only transpile jsx.
## other file extensions
Other file extensions for images or fonts should come from external packages bundled to js and be added as peerDependencies.https://gitlab.linguala.com/linguala/ui-components/-/issues/52Specify target platform for bundling2020-05-24T15:11:40ZTobias Thüringt.thuering@linguala.comSpecify target platform for bundlingBy restricting to certain browsers & common used versions we can reduce the bundle-size and loading-times.
Using [@babel/preset-modules](https://github.com/babel/preset-modules) we could minimize babels transforms and in consequence the...By restricting to certain browsers & common used versions we can reduce the bundle-size and loading-times.
Using [@babel/preset-modules](https://github.com/babel/preset-modules) we could minimize babels transforms and in consequence the bundle-size.
Related to #9https://gitlab.linguala.com/linguala/ui-components/-/issues/51Setup commitlint2020-05-27T07:55:35ZTobias Thüringt.thuering@linguala.comSetup commitlintRelated to #28
Have a look at how to commit, with a new command. `npx git-cz`, reference: https://github.com/commitizen/cz-cli#using-the-command-line-toolRelated to #28
Have a look at how to commit, with a new command. `npx git-cz`, reference: https://github.com/commitizen/cz-cli#using-the-command-line-toolhttps://gitlab.linguala.com/linguala/ui-components/-/issues/50Split fonts out of this package2020-09-02T09:30:07ZTobias Thüringt.thuering@linguala.comSplit fonts out of this package- [x] make sure we have all necessary font formats that **work** in all current browsers and operating systems. (woff2, woff, ...?) related to #23
- [ ] add separate exports for each of them
- [ ] reference it in GlobalStyles/GlobalFonts...- [x] make sure we have all necessary font formats that **work** in all current browsers and operating systems. (woff2, woff, ...?) related to #23
- [ ] add separate exports for each of them
- [ ] reference it in GlobalStyles/GlobalFonts (related to #1 ?)
Benefit: package bundle will be about 50% smaller (currently ~300KB) and not every project will use the Linguala Font, when using a different themehttps://gitlab.linguala.com/linguala/ui-components/-/issues/46Update: StoryBook preset / config for create-react-app2020-06-03T08:08:47ZDamien ThillUpdate: StoryBook preset / config for create-react-app```
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6....```
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Using default Webpack setup.
WARN Storybook support for Create React App is now a separate preset.
WARN To get started with the new preset, simply add `@storybook/preset-create-react-app` to your project.
WARN The built-in preset will be disabled in Storybook 6.0.
info => Loading create-react-app config.
webpack-config: eslint-loader found in modules.rules[12], ignoring it
webpack built ff9d79c08f090420205e in 12868ms
```https://gitlab.linguala.com/linguala/ui-components/-/issues/28Semantic Release for CI-based npm publishing?2020-04-29T08:25:33ZTobias Thüringt.thuering@linguala.comSemantic Release for CI-based npm publishing?Instead of @tth always manually publishing new releases of `@linguala/ui-components`, we could use Gitlab-CI to do this chore.
Using semantic-release would be an option: https://github.com/semantic-release/semantic-release#how-does-it-w...Instead of @tth always manually publishing new releases of `@linguala/ui-components`, we could use Gitlab-CI to do this chore.
Using semantic-release would be an option: https://github.com/semantic-release/semantic-release#how-does-it-work
> Hint:
This requires that people who push commits to master following a strict commit structure... (Workshop?)
The CHANGELOG format might need to be adjusted as well.
* [ ] add semantic-release to devDependencies
* [ ] setup CI for npm publishing (add publisher account on npm)
* [ ] setup https://github.com/commitizen/cz-cli or https://github.com/conventional-changelog/commitlint to enforce commit messages follow a defined format #51
* [ ] publish first release with Gitlab-CI-runnerhttps://gitlab.linguala.com/linguala/ui-components/-/issues/15Improve bundling: derive commonjs includes programmatically for `rollup-plugi...2020-05-27T07:50:06ZTobias Thüringt.thuering@linguala.comImprove bundling: derive commonjs includes programmatically for `rollup-plugin-commonjs`Currently we need to add individual packages to commonjs includes, like here e.g.: https://gitlab.linguala.com/linguala/ui-atoms/merge_requests/145/diffs?commit_id=4c9de92cde88bea6da470fe3c774d89729d2fa7d#b96b8970c7fefd4e2be9a9ce803a2474...Currently we need to add individual packages to commonjs includes, like here e.g.: https://gitlab.linguala.com/linguala/ui-atoms/merge_requests/145/diffs?commit_id=4c9de92cde88bea6da470fe3c774d89729d2fa7d#b96b8970c7fefd4e2be9a9ce803a247433207006_52_52
```
import pkg from '../package.json'
const externalSubpackages = ['react-is']
const externals = new Set(
Object.keys(pkg.dependencies)
.concat(Object.keys(pkg.peerDependencies))
.concat(externalSubpackages)
)
export { externals }
```
rollup.config.js
```
import cjs from 'rollup-plugin-commonjs'
cjs({
...
include: [
'node_modules/create-react-class/**',
'node_modules/fbjs/**',
'node_modules/object-assign/**',
'node_modules/react/**',
'node_modules/react-dom/**',
'node_modules/react-is/**',
'node_modules/prop-types/**',
'node_modules/hoist-non-react-statics/**',
'node_modules/is-function/**',
'node_modules/is-plain-object/**',
'node_modules/stylis/**',
'node_modules/isobject/**',
],
})
```
->
```
import cjs from 'rollup-plugin-commonjs'
cjs({
...
include: externals.map(pkg => `node_modules/${pkg}/**`),
})
```https://gitlab.linguala.com/linguala/ui-components/-/issues/9Limit bundle size for this library2020-04-23T16:16:50ZTobias Thüringt.thuering@linguala.comLimit bundle size for this libraryTry to keep the amount of dependencies low and avoid pulling in big dependencies.
Use one of these tools to do this
* https://github.com/siddharthkp/bundlesize
* https://github.com/ai/size-limit
* https://github.com/mkwtys/bundle-sizeTry to keep the amount of dependencies low and avoid pulling in big dependencies.
Use one of these tools to do this
* https://github.com/siddharthkp/bundlesize
* https://github.com/ai/size-limit
* https://github.com/mkwtys/bundle-size