feat(v1): rewrite engine, make a monorepo

[Tahul]

Following #95

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
pinceau	Edit on Studio ↗︎	View Live Preview	6752770

[netlify]

✅ Deploy Preview for pinceau ready!

Name	Link
🔨 Latest commit	1592550
🔍 Latest deploy log	https://app.netlify.com/sites/pinceau/deploys/652c2555aa30770007836650
😎 Deploy Preview	https://deploy-preview-103--pinceau.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Tahul]

@SGAMERyu ; you might want to look at this one :)

[MrHBS]

Very excited for this one!

[Tahul]

Thanks for the support @MrHBS :)

I made huge progress in the latest commit, including fully testing (almost 100% coverage) both @pinceau/core and @pinceau/theme which are biggest parts of the new arch.

I'll now be doing the same on @pinceau/style and @pinceau/vue.

This led to major stability improvements and overall rewrite of both these packages.

I can't wait to share more about the project, happy to know some of you are following. 😊

[Tahul]

Hey @MrHBS ; @zanfee ; @henrycunh ;

I fully revamped all existing package features and tested them all.

Runtime engine is now framework agnostic and Vue integration is fully tested.

Now, I'll put some focus on Volar integration, and Pinceau IntelliSense extension.

Next, I'll upgrade the docs, and aim toward the v1.0 release.

Thanks for following the project.

[Tahul]

Hey @MrHBS ; @SGAMERyu ; @zanfee ; @henrycunh ;

In the latest commit, I added full support for Svelte and the whole test suite for it.

I started trying to support Svelte as I was building the VSCode extension, which now works much better thanks to that little detour.

In the next commit, I'll be shipping the support for all JSX-based frameworks through @pinceau/jsx and hopefully a working version of play.pinceau.dev that uses this new Pinceau version.

[SGAMERyu]

Hey @MrHBS ; @SGAMERyu ; @zanfee ; @henrycunh ;

In the latest commit, I added full support for Svelte and the whole test suite for it.

I started trying to support Svelte as I was building the VSCode extension, which now works much better thanks to that little detour.

In the next commit, I'll be shipping the support for all JSX-based frameworks through @pinceau/jsx and hopefully a working version of play.pinceau.dev that uses this new Pinceau version.

Looking forward to version 1.0, I'm currently working on a demo of pinceau's viewer, just like the tailwind viewer

[Tahul]

@SGAMERyu ; I can't wait to show you what I built for this v1; I'm getting amazed a bit more every day. 😄

[Tahul]

React is now fully supported as well, with some great discoveries from the new API.

const TestComponent = $styled.a<{ color: ThemeTokens<'$color'> }>({ color: (color) => props.color }).withVariants({ ...variants })

const MyPage = () => {
   return (
      <TestComponent color="$color.red.1">Hello World</TestComponent>
   )
}

This is cool for React, but after making it fully work there, I tried to integrate it with Vue and Svelte, as the new Pinceau engine makes it just a few lines for me to add between frameworks.

That unlocked:

In Vue:

<script lang="ts">
const TestButton = $styled.a<{ color: ThemeTokens<'$color'> }>({ color: (color) => props.color }).withVariants({ ...variants })
</script>

<template>
   <div>
      <TestButton color="$color.blue.1">
      	BlueButton
      </TestButton>
      
      <TestButton color="$color.green.2">
      	Green button
      </TestButton>
   </div>
</template>

In Svelte:

<script lang="ts">
const TestButton = $styled.a<{ color: ThemeTokens<'$color'> }>({ color: (color) => props.color }).withVariants({ ...variants })
</script>

<div>
   <TestButton color="$color.blue.1">
    BlueButton
   </TestButton>
      
   <TestButton color="$color.green.2">
    Green button
   </TestButton>
</div>

I think this is a HUGE gain for developer experience in .svelte and .vue contexts, because this kills the 1 component per-file that I myself encountered many times.

When you want to create a single component that is reusable, but still has no need to be a SFC because it will only be used in your local component, this becomes very handy.

It also makes it a breeze to create components with props typed from the theme.

---

Well, now that this is all done and pushed, I'm hoping on the playground and expect to ship a first version very soon!

[Tahul]

This PR is now ready, I'll proceed with merging on main.

Documentation is obviously not up-to-date, but will be very soon.

I am rushing on finishing the playground now, so anyone can try the new features and syntaxes right from the browser.

I will be making a v1-beta release as well, as I need it for the playground, and so anyone curious can try.

You can find examples of any compatible setup in the examples/ directory of the repository.

Excuse me for the lack of documentation, but I have to rush towards something "presentable" as I am showcasing this new version at VueJS Paris!