Code Monkey home page Code Monkey logo

Comments (11)

developit avatar developit commented on April 27, 2024 15

Willing to help on this, any pointers for where to start?

from next.js.

trueadm avatar trueadm commented on April 27, 2024 11

I'm also totally down to getting Inferno fully working with Next as this project is beyond awesome in my opinion. Great work guys :)

from next.js.

matthewmueller avatar matthewmueller commented on April 27, 2024 2

Piggybacking off @rektide's work, I was able to get it working by...

git clone https://github.com/zeit/next.js next
cd next
npm install
npm install -i preact-compat/react preact-compat/react-dom preact preact-compat
# comment out HTMLDOMPropertyConfig
npm build # this will fail on the tests, but will still give you a dist/client
# copy that dist/client to whatever app you've got next running on

Some additional work needs to be done to figure out how to make HMR play nice with non-react things. react-hot-loader does some crazy stuff. @developit has minimalist way to make HMR work more universally: preactjs/preact#168 (comment)

I think the big things needed from next are:

  1. remove the dependency on HTMLDOMPropertyConfig, it can just be a map copied into next or a separate module.
  2. replace react-hot-loader with something that just adheres to the HMR API.

from next.js.

rauchg avatar rauchg commented on April 27, 2024 2

This is already possible with simple webpack overrides.

from next.js.

rauchg avatar rauchg commented on April 27, 2024 1

Paging @nkzawa and @arunoda. I think we should think about even documenting in the Wiki what the API surface that we depend on from React is. This will allow people to keep experimenting with engine improvement and minimization :)

from next.js.

PaulBGD avatar PaulBGD commented on April 27, 2024

@developit I made a list of files importing React that are not tests, examples, or benchmarks:
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/pages/_error.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/client/head-manager.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/server/render.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/lib/side-effect.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/lib/eval-script.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/client/next.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/lib/head.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/pages/_error-debug.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/lib/document.js
https://github.com/zeit/next.js/blob/4b74c70cc9f55a19d4f8305214d2840186af0155/lib/app.js

from next.js.

rektide avatar rektide commented on April 27, 2024

I started trying to see what this would take to implement. I thought this was going to do it, but not seeing any changes.
https://github.com/rektide/next.js/tree/preact-compat

Update: now getting some test failure:

Error: ./dist/client/head-manager.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/HTMLDOMPropertyConfig' in /home/rektide/src/next.js/dist/client
resolve module preact-compat/lib/HTMLDOMPropertyConfig in /home/rektide/src/next.js/dist/client
  looking for modules in /home/rektide/src/next.js/node_modules
    resolve 'file' or 'directory' lib/HTMLDOMPropertyConfig in /home/rektide/src/next.js/node_modules/preact-compat
      resolve file
        /home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig doesn't exist
        /home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig.webpack.js doesn't exist
        /home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig.web.js doesn't exist
        /home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig.js doesn't exist
        /home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig.json doesn't exist
      resolve directory
        /home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig doesn't exist (directory default file)
        /home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig/package.json doesn't exist (directory description file)
[/home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig]
[/home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig.webpack.js]
[/home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig.web.js]
[/home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig.js]
[/home/rektide/src/next.js/node_modules/preact-compat/lib/HTMLDOMPropertyConfig.json]

HTMLDOMPropertyConfig does not appear in the Preact or preact-compat codebase. It's use in Next.js is exclusively in head-manager. I tried commenting out the import and it's use as so but got 3 other test errors that were a bit harder to decipher: const attr = /*HTMLDOMPropertyConfig.DOMAttributeNames[p] ||*/ p.toLowerCase(). I still haven't really started figuring out what it's asking for or what React is providing here.

from next.js.

rauchg avatar rauchg commented on April 27, 2024

Very impressive @rektide ! Looking forward to seeing this evolve. Ideally we get it down to 2 imports (next-preact and preact peer dep) and 1 tweak on the config :)

from next.js.

lukeed avatar lukeed commented on April 27, 2024

@matthewmueller Tests pass for me!

from next.js.

rauchg avatar rauchg commented on April 27, 2024

That's really amazing (and simple) @matthewmueller

from next.js.

lukeed avatar lukeed commented on April 27, 2024

Both inferno & preact lack a HTMLDOMPropertyConfig component, but I'm not sure that they should need to offer one...

from next.js.

Related Issues (20)

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.