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

Add navigation entry point compatible with Next.js App Router #583

Closed
wants to merge 4 commits into from

Conversation

JohnAlbin
Copy link
Collaborator

@JohnAlbin JohnAlbin commented Nov 1, 2023

This pull request is for: (mark with an "x")

  • packages/next-drupal

GitHub Issue: #442

Describe your changes

Moves the use-menu hook to a new entry point so that developers can import any of the other exports from the main entry point into their Server Components.

An alternate build of this feature is at #600

Copy link

vercel bot commented Nov 1, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
next-drupal ⬜️ Ignored (Inspect) Visit Preview Nov 22, 2023 11:00am

Copy link

github-actions bot commented Nov 1, 2023

🎉 Experimental release published 📦️ on npm!

pnpm add next-drupal@0.0.0-pr.583.1c3e1a12
yarn add next-drupal@0.0.0-pr.583.1c3e1a12
npm i next-drupal@0.0.0-pr.583.1c3e1a12

@JohnAlbin
Copy link
Collaborator Author

Using next-drupal@0.0.0-pr.583.4cc07119 causes next build to throw an error when it tries to compile:

TypeError: Jsona is not a constructor

@JohnAlbin
Copy link
Collaborator Author

I've done some preliminary testing of next-drupal@0.0.0-pr.583.80630460 with Next.js v14 and it works!

@JohnAlbin
Copy link
Collaborator Author

I'm a bit concerned about commit 9d5d410 as its a bit of a hack to get separate type definition files for CommonJS and ESModule builds since microbundle doesn't support that.

I'm looking at tsup because it is a TypeScript-specific bundler that has built-in support for build-specific type definition files.

@JohnAlbin
Copy link
Collaborator Author

For comparison of microbundle vs tsup, here is build time from the GitHub Action for this PR's build (microbundle):

$ microbundle --no-compress --jsx React.createElement --format modern,cjs
Build "next-drupal" to dist:
      16.6 kB: index.cjs.gz
        13 kB: index.cjs.br
      11.4 kB: index.modern.js.gz
      9.57 kB: index.modern.js.br
      2.09 kB: navigation.cjs.gz
      1.81 kB: navigation.cjs.br
       1659 B: navigation.modern.js.gz
       1426 B: navigation.modern.js.br
$ node postBuild.js
Created unique *.d.cts files for CommonJS build.
Done in 25.03s.

And here's the build time from the GitHub Action for #600 (tsup):

$ tsup
CLI Building entry: src/index.ts, src/navigation.ts
CLI Using tsconfig: tsconfig.json
CLI tsup v7.3.0
CLI Using tsup config: /home/runner/work/next-drupal/next-drupal/packages/next-drupal/tsup.config.ts
CLI Target: es2020
CLI Cleaning output folder
ESM Build start
CJS Build start
ESM dist/index.js              39.60 KB
ESM dist/navigation.js         889.00 B
ESM dist/chunk-BLP55UXC.js     4.19 KB
ESM dist/index.js.map          84.28 KB
ESM dist/navigation.js.map     1.68 KB
ESM dist/chunk-BLP55UXC.js.map 9.01 KB
ESM ⚡️ Build success in 52ms
CJS dist/index.cjs          46.12 KB
CJS dist/navigation.cjs     5.45 KB
CJS dist/navigation.cjs.map 9.89 KB
CJS dist/index.cjs.map      94.01 KB
CJS ⚡️ Build success in 53ms
DTS Build start
DTS ⚡️ Build success in 3986ms
DTS dist/index.d.ts          11.76 KB
DTS dist/navigation.d.ts     241.00 B
DTS dist/types-5xvQrGBo.d.ts 11.74 KB
DTS dist/index.d.cts         11.76 KB
DTS dist/navigation.d.cts    241.00 B
Done in 4.63s.

tsup is more than 5x faster for building next-drupal. Of course, the correctness of the build is the most important; I still need to add some tests for that (in a different PR).

Fixes #442

BREAKING CHANGE:

The useMenu() client hook has moved out of the main entry point and into its own
entry point. Any import or require of that function needs to be updated:

Old usage:
```js
import { useMenu } from "next-drupal"
```

New usage:
```js
import { useMenu } from "next-drupal/navigation"
```
Prevents "TypeError: Jsona is not a constructor" error
@JohnAlbin
Copy link
Collaborator Author

Closing in favor of #600

@JohnAlbin JohnAlbin closed this Nov 22, 2023
@JohnAlbin JohnAlbin deleted the 442-break-usemenu branch November 22, 2023 16:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant