Giter Club home page Giter Club logo

dhow's Issues

`dhow` rewrite

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

Allow specifying a custom page initializer (`App`)

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.

Root fragment breaks build

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.

Emulate new JSX transform benefits

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.