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

Try to build bundles for RTK Query (core and React) #1011

Merged
merged 18 commits into from
Apr 22, 2021

Conversation

markerikson
Copy link
Collaborator

@markerikson markerikson commented Apr 21, 2021

VERY BUNDLED MUCH EXCITEMENT MAY MERGE NOW

I've managed to coerce the build.ts script into outputting the same bundle sets for the /query and /query/react dist folders. Notes so far:

  • Need to get package.json files for those entry points in the output, and they probably need to have proper keys for the bundle files (module, main, etc)
  • Running tsc against src/query/tsconfig.json produces a copy of the RTK .d.ts files in a weird nested structure. Do we just need to run it once on src? Was thinking I maybe needed to run tsc programmatically for each one, but maybe not.
  • Got API Extractor outputting reports for all three entry points if you manually call it and pass the config files. I was looking at calling it programmatically from within the build loop and adding --local and --skipExtraction args to build.ts
  • Not at all ready to try doing a package + install into an app to try this out
  • UMD for those entry points too?
  • Had to add some dummy type imports into the codebase to avoid uses of import('some-lib').SomeType, per @phryneas's comment at [api-extractor] import() types are not handled correctly in .d.ts rollups microsoft/rushstack#1050 (comment)
  • Haven't tried setting up tests whatsoever

@markerikson
Copy link
Collaborator Author

markerikson commented Apr 22, 2021

Good news, bad news.

Good news:

  • I've got the TS typedef output looking fine. Dropped the combined .d.ts files per suggestion from Lenz, and switched to compiling all of src with TSC in one shot. That gives us all the typedef files in the right structure.
  • Got all of the bundle files showing up the way I want them, including even the UMD files.
  • API Extractor is generating the right output for each entry point
  • TS doesn't seem to support nested exports fields yet, but I was able to hack around that and get it to recognize @reduxjs/toolkit/query/react as a viable entry point via a typesVersions section per Support for NodeJS 12.7+ package exports microsoft/TypeScript#33079 (comment):

image

Bad news:

  • I can't seem to get Webpack to recognize my nested entry points, and tbh I'm getting very lost in this maze of keywords and options.

Here's what I've got right now:

"main": "dist/index.js",
  "module": "dist/redux-toolkit.esm.js",
  "unpkg": "dist/redux-toolkit.umd.min.js",
  "types": "dist/index.d.ts",  
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "module": "./dist/redux-toolkit.esm.js",
      "default": "./dist/index.js"
    },
    "./query": {
      "types": "./dist/query/index.d.ts",
      "module": "./dist/query/rtk-query.esm.js",
      "default": "./dist/query/index.js"
    },
    "./query/react": {
      "types": "./dist/query/react.d.ts",
      "module": "./dist/query/react/rtk-query-react.esm.js",
      "default": "./dist/query/react/index.js"
    }
  },
  "typesVersions": {
    "*": {
      "query": ["./dist/query/index.d.ts"],
      "query/react": ["./dist/query/react.d.ts"]
    }
  },

When I try to start up this CRA app, the result is:

Module not found: Can't resolve '@reduxjs/toolkit/query/react' in 'D:\Projects\redux\temp\rtkq-react\src\app'

Ditto if I try from '@reduxjs/toolkit/query'.

I've dug through a dozen issues in random repos regarding export maps, and thus far I don't think I have any real idea what I'm doing.

Ultimately, what I want is:

// Standard entry point
import { createSlice } from "@reduxjs/toolkit";
// Nested entry point, still UI-agnostic APIs
import { createApi as genericCreateApi } from "@reduxjs/toolkit/query"
// Double-nested entry point, React-specific version of createApi
import { createApi as reactCreateApi} from "@reduxjs/toolkit/query/react"

Really going to need some advice from experts on this one.

@github-actions
Copy link

Size Change: +467 B (0%)

Total Size: 84.4 kB

Filename Size Change
dist/redux-toolkit.cjs.development.js 11.8 kB +93 B (0%)
dist/redux-toolkit.cjs.production.min.js 5.78 kB +113 B (1%)
dist/redux-toolkit.esm.js 11.4 kB +96 B (0%)
dist/redux-toolkit.modern.development.js 9.22 kB -21 B (0%)
dist/redux-toolkit.modern.js 9.26 kB -19 B (0%)
dist/redux-toolkit.modern.production.min.js 4.33 kB -8 B (0%)
dist/redux-toolkit.umd.js 21.8 kB +111 B (0%)
dist/redux-toolkit.umd.min.js 10.7 kB +102 B (0%)
ℹ️ View Unchanged
Filename Size Change
dist/index.js 146 B 0 B

compressed-size-action

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 00440b1:

Sandbox Source
Vanilla Configuration
Vanilla Typescript Configuration
rsk-github-issues-example Configuration

@markerikson
Copy link
Collaborator Author

Per guidance from @Andarist , the problem was that Webpack 4 doesn't yet recognize export maps, so your package output has to have a folder structure that matches the intended import paths:

https://twitter.com/AndaristRake/status/1385120048818364419

I moved the legacy RTKQ repo folder from query to query-old to get that out of the way, tweaked the build script to move dist/query to ./query as the final step, and then updated inclusion paths to pull that in... and it works!

image

image

I've re-enabled the CI checks I'd disabled and I'm going to go ahead and merge this.

We don't have tests for the RTKQ code working yet, but that may be the biggest piece we're missing.

@markerikson markerikson marked this pull request as ready for review April 22, 2021 14:28
@markerikson markerikson changed the title WIP: Try to build bundles for RTK Query (core and React) Try to build bundles for RTK Query (core and React) Apr 22, 2021
@markerikson markerikson merged commit b7d27a6 into feature/v1.6-integration Apr 22, 2021
@markerikson markerikson deleted the feature/build-rtk-query branch April 22, 2021 14:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant