kartiknair / dhow Goto Github PK

While working on improving tests/testability and supporting _app.js, I accidentally rewrote dhow in the last couple of days, . You can take a look at the changes in the rewrite branch of my fork.

Some changes:

• min-document and associated logic is replaced with a custom (very basic) virtual DOM implementation consisting exclusively of a VNode class that can be stringified down to HTML. This makes many parts of the codebase much easier to reason about and test, stuff like #7 shouldn't be able to happen again.
• Language switched to TypeScript, although I don't feel strongly about this change. I mostly made the switch because the strict typing helps me reason about code architecture when starting to build something, I wouldn't mind dropping it at this point if you're opposed to the switch.
• Implemented support for _app.js, inspired by Next.js.
• pages has been moved to src/pages (it makes sense if have stuff like src/components/header.js). This is a very opinionated change, I don't feel strongly about keeping it in.
• #9 is merged in.
• Head doesn't use global anymore.
• The main build function is split up and heavily refactored in the hopes of making it easier to think about.

There's still some stuff to do: I haven't had the time to add CSS processing yet (although that shouldn't be a problem) and buildPages in build.ts is still a bit too large for my liking. But even so I'm opening this issue now to let you know that this is a thing, it'd be cool to work together on getting this merged (including any changes you propose, of course).

Not creating a PR yet because I'd like to hear your opinion on this first. But fair warning, if you take too long I'll probably publish my fork on NPM; I certainly changed enough code and concepts to allow me to that. First and foremost I rewrote this because I want to use dhow for my homepage, and I've been putting that off for long enough. Please don't take this as blackmail or something like that, I just want to be able to start work on that in a reasonable timeframe (and I'll need my changes to be on NPM for that).

See the title. Can create a PR if you'd like.

Hi,
I want to install TailwindCSS 2 with the PostCSS plugin, but I have error:
Error: [object Object] is not a PostCSS plugin

I tried this https://tailwindcss.com/docs/installation#post-css-7-compatibility-build but still not working.

Since _document.js is already a thing, why not take more inspiration from Next.js?

The default App would be something like

const App = ({ Component, props }) => (
    <Component {...props} />
);

export default App;

where props is the result of the getProps function that a page can optionally export.

Custom Apps would allow for things like

// _app.js
import Header  from 'header'
import Footer 'footer'

const App = ({ Component, props: { headerProps, footerProps, ...pageProps } }) => (
    <Header {...headerProps} />

    <Component {...pageProps} />

    <Footer {...footerProps} />
);

// some/page.js
const Page = ({ posts }) => {
    // ...
};

export const getProps = async () => {
    return { headerProps: { isLanding: false }, footerProps: { dense: true }, posts: [ /* ... */ ] }
};

This is the only feature I can think of that's stopping me from using dhow right now, and I'm willing to take a stab at implementing it. Will probably submit a PR either later today or tomorrow.

Hello!

Excellent work with DHOW but I have a question.

Is this working now with ReactJS? Thank you.

I really like the new JSX transform because having a (deceivingly) "unused" import sit at the top of every file annoyed me to no end. I don't really care about the other changes of the new transform (see the post linked above) so the import is what I will focus on.

esbuild doesn't seem likely to introduce proper support for the new transform (evanw/esbuild#334) but they suggest either a plugin (which calls babel, so horrible performance) or to just use the inject option to inject the import into each file.

I'll submit a PR with the latter option in a second.

A MWE is

import Dhow from 'dhow';

const Page = () => (
    <><p>hello</p></>
);

export default Page;

, it breaks with the following error:

TypeError: Cannot read property 'length' of undefined
    at serializeElement (/home/lw/Projects/dhow/node_modules/min-document/serialize.js:32:29)

This is a pretty common pattern, in part since it allows doing stuff like

const Page = () => (<>
    <Head></Head>

    <header></header>

    <main></main>

    <footer></footer>
</>);

without having to use unnecessary/semantically wrong elements.