ec.tailbite 0.0.74
Install from the command line:
Learn more about npm packages
$ npm install @entrecode/ec.tailbite@0.0.74
Install via package.json:
"@entrecode/ec.tailbite": "0.0.74"
About this version
This is the entrecode frontend component framework.
Since it is a private package, you are required to have npm configured correctly.
1. create a GitHub PAT here https://github.com/settings/tokens with the permission read:packages
.
@entrecode:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOURTOKEN
Replace YOURTOKEN
with the generated PAT
npm install @entrecode/ec.tailbite --save
To make sure you have all styles, make sure your tailwind config includes:
module.exports = {
/* .. */
content: [
/* .. */
'./node_modules/@entrecode/ec.tailbite/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
/* copy this part from ec.tailbite tailwind.config.js */
},
},
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography')],
/* .. */
};
Copy the contents index.css to your main css file and adapt the theme to your needs.
Each file is imported seperately:
import Section from '@entrecode/ec.tailbite/components/Section';
import useSdk from '@entrecode/ec.tailbite/hooks/useSdk';
import cx from '@entrecode/ec.tailbite/util/classNames';
This ensures your bundle stays small.
Wrap your App in Tailbite
like this:
<Tailbite
environment={{
shortID: '83cc6374',
env: 'stage',
colors: {
primary: '#ba443c',
},
}}
>
{/* your app */}
</Tailbite>
The build is using vite in library mode. The problem: default settings will build only one giant bundle , which results in a lot of stuff nobody needs. Luckily this comment pointed out that the 3.2.0 beta version of vite supports multiple entry points in library mode. To make this work with typescript (using vite-plugin-dts), the entry keys must match the actual paths, relative to src, e.g.
{
entry: {
/* .. */
'components/Section': path.resolve(__dirname, 'src', 'components', 'Section.tsx'),
/* .. */
}
}
... which results in Section.js
being generated into the same directory as Section.d.ts
.
This is now implemented using a file crawler to determine the chunks automatically (see vite.config.ts
)
To be able to import without including the dist
folder, I am using a little hack.
To publish the package to the private entrecode github registry, run:
npm run patch
This will build all files and bump the version + commit everything.