Use Rollup and Flattened Dist Directory

[sallar]

Hi! As discussed in #1, this is my take on publishing the package.

However, instead of just running npm publish, there is a custom script called publish:custom now that we have to run. yarn publish:custom for example. This results in deploying this structure to npm:

❯ ls dist
total 360
  0 drwxr-xr-x  10 sallar  staff   320B Feb 22 19:05 ./
  0 drwxr-xr-x  14 sallar  staff   448B Feb 22 18:54 ../
  0 drwxr-xr-x   5 sallar  staff   160B Feb 22 19:05 assets/
 16 -rw-r--r--   1 sallar  staff   6.9K Feb 22 19:05 main.d.ts
 80 -rw-r--r--   1 sallar  staff    39K Feb 22 19:05 main.js
160 -rw-r--r--   1 sallar  staff    79K Feb 22 19:05 main.js.map
  8 -rw-r--r--   1 sallar  staff   1.9K Feb 22 19:05 navigation.d.ts
 32 -rw-r--r--   1 sallar  staff    13K Feb 22 19:05 navigation.js
 56 -rw-r--r--   1 sallar  staff    27K Feb 22 19:05 navigation.js.map
  8 -rw-r--r--   1 sallar  staff   1.7K Feb 22 19:05 package.json

And can be imported by users like this:

import { ZStack } from 'swiftui-react-native';
import { NavigationLink } from 'swiftui-react-native/navigation';

I can also add a Github Action that automatically releases this to NPM, when a Github Release is created. Let me know if you want me to also add this!

What do you think?

Closes #1

[andrew-levy]

@sallar This looks awesome! Thank you for taking the time to do this. I will take a look at this more closely later today, but at first glance this is exactly what I was thinking. As for the Github Action, that sounds like a better way to handle releases. Feel free to set that up if you would like! Is the Action a code change, or is that taken care of within github? Much appreciated, this is a big lift for me.

[sallar]

My pleasure @andrew-levy
I'll setup GitHub actions and add it to the same PR. It's a YAML file that needs to be added to the project, but it's possible to visually change and update it in Github later too.

[sallar]

@andrew-levy I added the GitHub action. Before merging to master, add the NPM secret here:

Repo Settings > Secrets > Add Repository Secret

name of secret: NPM_AUTH_TOKEN
value: an npm token

Im using this package to publish to npm: https://github.com/marketplace/actions/automated-releases-for-npm-packages

And it uses this workflow:

• Check for the latest version number published to npm.
• Lookup all commits between the git commit that triggered the action and the latest publish.
  • If the package hasn't been published or the prior publish does not include a git hash, we'll only pull the commit data that triggered the action.
• Based on the commit messages, increment the version from the lastest release.
  • If the string "BREAKING CHANGE" is found anywhere in any of the commit messages or descriptions the major version will be incremented.
  • If a commit message begins with the string "feat" then the minor version will be increased. This works for most common commit metadata for feature additions: "feat: new API" and "feature: new API".
  • All other changes will increment the patch version.
• Publish to npm using the configured token.
• Push a tag for the new version to GitHub.

[andrew-levy]

@sallar Looks great. I was able to add my npm auth token of type 'automation', so I think this is ready to merge if you are done adding changes. Will the merge trigger the action?

[sallar]

@andrew-levy awesome. yes it will trigger the action. it might fail though as the publish part hasnt been tested from this repo. if it does, I can quickly fix it. LGTM!

[sallar]

@andrew-levy thanks for merging. seems like the publish was successful:
https://github.com/andrew-levy/swiftui-react-native/runs/1961900496?check_suite_focus=true
https://github.com/andrew-levy/swiftui-react-native/releases/tag/v1.8.1

[andrew-levy]

@sallar Yep looks great! I noticed two things though.

1. https://www.npmjs.com/package/swiftui-react-native there is no readme available for viewing it on npm. We may need to point it to the correct readme.
2. The npm version does not match the one in package.json. Is this okay? Going forward, should that update automatically?

[sallar]

@andrew-levy yes it's because the README wasn't copied to dist folder. I probably should make another PR and add that for you. Sorry about that, forgot :D

The second part, yes I noticed it just now two. The trouble is, it has to commit the resulting package.json again to the repo, which creates a new commit which in turn will trigger the github action again. But there are ways to prevent that. I will fix this in my PR too!

[sallar]

@andrew-levy a "cleaner" way would be to set the package.json version to 0.0.0-development, so it will be always automatic when published. What do you think? This will not create extra commits for you.

[andrew-levy]

@sallar This works, I'll go ahead and merge those new changes in soon. Thanks again.

Regarding the /assets directory in this project, it currently stores the cover image for the readme, as well as some library icons like right-cheveron and check-mark. Eventually, my plan is to not use pngs for these icons, but rather something like https://github.com/birkir/react-native-sfsymbols. It has native code, so I will need to see if its a good idea to bring that in or something like it (is there a performance cost? more dependencies/setup steps? I want to keep setup relatively simple). So eventually, we won't need to copy that directory over. That should just be a small change when we cross that bridge.

[sallar]

@andrew-levy not bundling PNG is a good idea. You might want to give the users the option to set the image by themselves (pass in as props) so they could use whatever library they want