https://github.com/pie-framework/pie-wc
POC/ test for PIE next gen based on Vite and Lit.
https://github.com/pie-framework/pie-wc
Last synced: 14 days ago
JSON representation
POC/ test for PIE next gen based on Vite and Lit.
- Host: GitHub
- URL: https://github.com/pie-framework/pie-wc
- Owner: pie-framework
- Created: 2023-11-06T01:41:36.000Z (over 2 years ago)
- Default Branch: develop
- Last Pushed: 2023-11-11T22:53:15.000Z (over 2 years ago)
- Last Synced: 2025-01-01T14:11:42.725Z (over 1 year ago)
- Language: TypeScript
- Size: 899 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PIE Web Components
[!WARNING]
This is a proof of concept to test out a new dev architecture that's based on Lit and Vite primarily. It's not
ready for production use. In fact we'll likely create a fresh project once we're happy with the basic results
here.
## Why?
The current version of PIE is based on React and Webpack. While this has served us well, it's not quite aligned
with the stated design goals of PIE, in particular to use web components to the fullest extent (and as a result
of that, make it easy to use PIE in other frameworks). On top of that, the current webpack based build architecture
(see PIE CLI and the custom build server - PITS - we use at Renaissance) is complex and hence hard to maintain.
Finally, there are a few architecture improvements we can make to make PIE easier to use in all kinds of contexts,
even without having to use special build tools and replace some of the custom tools we built with alternatives
we don't have to maintain ourselves (like Storybook).
## Design Goals
- Use web components to the fullest extent possible. Lit (3.x) is a fantastic minimal framework that allows us to create
web components that can be used in any framework (or at least most of them).
- Make the framework components better composable, so that it is easier to replace parts with custom implementations
and make the whole easier to maintain. For instance, we can have a container component that handles common session
handling and then e.g. a panel to display scores can be designed to run inside that container. That panel would
require minimal knowledge of the rest of PIE, which would make it easier to maintain and also easier to wrote
custom versions of it. Another example of where we can do better in this respect is how e.g. controllers and
components are linked, which is currently deep into the internals of the PIE tooling.
- Faster builds, smaller bundles, easier project and build management (using Vite).
- Typing (using TypeScript) everywhere so that code is more robust and easier to explore.
- Upgrade Material Design to the latest version (3.x). Material Design Web 3 is being worked on and is still at least
several months out from being released, but it is likely to be a significant improvement over the current version
(1.x) we use, particularly when it comes to accessibility.
- Better test support (via Storybook, possibly other tools).
## Use
Currently, the project uses [PNPM](https://pnpm.io/). We're considering [Turbo](https://turbo.build/)
and [Bun](https://bun.sh/).
### Install dependencies
```sh
pnpm install
```
### Build
```sh
pnpn build
```
### Run Storybook
```sh
cd apps/workshop
pnpm storybook
```
## TODO
* Check out https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/ for tips on publishing
(and possibly other resources).
* Figure out how to include existing (React based) PIE elements (this project is not a go until we have an answer
for that). There's some wip in Lit that might help with this, see https://github.com/lit/lit/issues/2353