thien-do/typed-tailwind

Simplify method chain

Closed this issue · 6 comments

kcjpop commented

The current API calls are like this:

image

Would it be better to have something simpler.

Tw().bgfff.lt960FlexNone.lt960WFull.$()

The implementation could be done with Proxy.

thien-do commented

Thanks let me try

stephenh commented

Fwiw I don't think you need Proxy to do this, you can just change:

  twBlock(): Tailwind { return this.add("tw-block"); }

To:

  get twBlock(): Tailwind { return this.add("tw-block"); }

I.e. make the method a getter and now callers won't need the params to invoke twBlock.

If you'd like, I can try and submit a PR that does this. Also happy to have you just do it. :-)

  • 👍2
stephenh commented

Would also be cool if the Tw const had "static" versions of each method, i.e.:

const Tw = {
  get twBlock(): { return new Tailwind().twBlock() }
}

Or what not so that it could be Tw.twBlock.$ i.e. drop the initial parens on the Tw call.

It'll mean two methods for every rule, i.e. the "static" twBlock to create a new Tailwind instance and the "instance" twBlock to add tw-block to an existing Tailwind instance, but given the code is generated and really pretty small/simple, I think I'd be a ergonomics win/worth it to kill the parens through the Tw.twBlock.$ chain.

  • 👍1
thien-do commented

@stephenh I would be more than happy to see and test a PR for that :D I didn't think of the "get" one to be honest 👍

Regarding the second suggestion, I think I'd be happy to have that too.

stephenh commented

Great! I'm super new to the codebase, as a lazy ask, could you link me to each file of 1) where the "twBlock() ..." methods are currently generated, and 2) which file you would change to test the new behavior? Thanks!

thien-do commented

Glad to help:

  1. where the "twBlock() ..." methods are currently generated
  • There are many steps in that process, but I think the one you're interested in is building the typescript file, which is defined inside "convert/src/file.ts". For example, this exact method converts a tailwind class to a method of our Typescript Tailwind class:

https://github.com/dvkndn/typed.tw/blob/732f65c86bb75f39b99482c388635f080d993c92/convert/src/file.ts#L56-L60

  1. which file you would change to test the new behavior

To test changes, I usually use the web interface. In other words, I simply run a local version of typed.tw to test it (yes I know, I'm sorry, I should have tests..).

The web is a CRA app so you need to cd into the web folder, npm install and npm start

Important: as you can see, the web is at /web and the convert logic is at /convert, so you'll need to link them to test (without the need to publish any package). I usually use npm link. The basic idea is that "typed-tailwind-convert" package in "web" is the "convert" folder.

After linked, you can test your change at localhost :D

Feel free to ping me if you need anything else

  • 👍1