Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(v1): rewrite engine, make a monorepo #103

Merged
merged 35 commits into from
Oct 15, 2023
Merged

feat(v1): rewrite engine, make a monorepo #103

merged 35 commits into from
Oct 15, 2023

Conversation

Tahul
Copy link
Owner

@Tahul Tahul commented Jul 24, 2023

Following #95

@nuxt-studio
Copy link

nuxt-studio bot commented Jul 24, 2023

Live Preview ready!

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

@netlify
Copy link

netlify bot commented Jul 24, 2023

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...

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
Copy link
Owner Author

Tahul commented Jul 31, 2023

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

Tahul added 2 commits August 7, 2023 16:43
…arts

fully imported language-server/vscode ext with fixed build ; prepared tests & fixtures too
@MrHBS
Copy link

MrHBS commented Aug 13, 2023

Very excited for this one!

@Tahul
Copy link
Owner Author

Tahul commented Aug 18, 2023

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
Copy link
Owner Author

Tahul commented Sep 12, 2023

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.

Co-authored-by: Agénor Debriat <agenor.debriat@me.com>
greatly improve typings and DX (volar/vscode ext upgrades)
@Tahul
Copy link
Owner Author

Tahul commented Oct 6, 2023

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
Copy link
Contributor

SGAMERyu commented Oct 7, 2023

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
Copy link
Owner Author

Tahul commented Oct 13, 2023

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

@Tahul
Copy link
Owner Author

Tahul commented Oct 13, 2023

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 Tahul marked this pull request as ready for review October 15, 2023 15:00
@Tahul
Copy link
Owner Author

Tahul commented Oct 15, 2023

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!

@Tahul Tahul merged commit c1616ac into main Oct 15, 2023
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants