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

Use 'system' format option for ES browser builds #658

Merged

Conversation

msutkowski
Copy link
Member

@msutkowski msutkowski commented Jul 19, 2020

Addresses #652.

This is 'hacky', but is the only way I can figure out how to get this to work with the current tsdx limitations.

Uses the unused system build format and just overrides the output for ES modules in the browser with the same config Redux uses. Confirmed that the build does work by converting the Redux UMD example to use configureStore/createSlice.

Update: I spent some more time reviewing the tsdx source, and the default configuration for any build is basically identical to the config Redux used, so I just simplified things. A working repo of the build from this last commit can be seen here: https://codesandbox.io/s/rtk-as-esm-browser-module-1lvrs?file=/index.html

@msutkowski msutkowski changed the title Use system build option for es browser build Use 'system' format option for ES browser builds Jul 19, 2020
@netlify
Copy link

netlify bot commented Jul 19, 2020

Deploy preview for redux-starter-kit-docs ready!

Built with commit 47d2a7a

https://deploy-preview-658--redux-starter-kit-docs.netlify.app

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 19, 2020

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 47d2a7a:

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

@phryneas
Copy link
Member

phryneas commented Jul 24, 2020

Just gave it a test, seems to be working well. Dependencies also seem to be bundled correctly, at least immer does it's job.

Some HTML to test locally, for the lazy ^^

<html>
    <head>
        <script type="module">
            import {configureStore, createReducer } from './redux-toolkit.esm.development.mjs';

            const reducer = createReducer([], {
                test1(state, action) {
                    state.push(1)
                },
                test2(state, action) {
                    state.push(2)
                }
            }, 
            [], 
            (state, action) => (console.log(action), state))

            const store = configureStore({
                reducer
            })

            const s1 = store.getState()
            store.dispatch({type: "test1"})
            const s2 = store.getState()
            store.dispatch({type: "test2"})
            const s3 = store.getState()

            console.log({s1,s2,s3})
        </script>
    </head>
    <body>
    </body>
</html>

@msutkowski
Copy link
Member Author

If it's approved all around, I'll drop a quick reference to this build by the UMD docs

@markerikson
Copy link
Collaborator

Do we want to get this out with 1.5?

@markerikson markerikson modified the milestones: 1.5, 1.3 Nov 28, 2020
@phryneas
Copy link
Member

Probably a good idea :)

@markerikson markerikson changed the base branch from master to v1.5.0-integration November 28, 2020 17:46
@markerikson markerikson merged commit 4bb85a6 into reduxjs:v1.5.0-integration Nov 28, 2020
@msutkowski msutkowski deleted the tooling/es-for-browsers branch March 29, 2021 04:42
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

3 participants