web: Publish NPM package

Publish nightly releases as part of the CI, so Ruffle can be easily
integrated into a website using a CDN (such as jsDelivr). It would
also be easier for websites to keep up-to-date, as NPM auto-updates
the `latest` tag to refer to the latest release.

A dedicated `package.json` is used for the published NPM package,
because `ruffle-selfhosted` depends on the private `ruffle-core`
package, which shouldn't be published.

Also, the `version` field must monotonically increase. So Webpack
auto-fills it to be `0.1.0-nightly.YYYY.MM.DD`. This format satisfies
a couple of needs:
* Newer nightly releases should take precedence over older ones.
* Stable releases (e.g. `1.0.0`) should take precedence over nightly
ones.

.github/workflows/release_nightly.yml

@@ -156,7 +156,8 @@ jobs:
         if: runner.os == 'Linux'
         run: |
           cp ${{ env.CARGO_BUILD_DIR }}/ruffle_desktop package/ruffle
-          cd package/
+          # We must enter the package/ directory in order to create a flat tarball (i.e. without a directory in it).
+          cd package
           tar -czvf ../${{ env.PACKAGE_FILE }} *
 
       - name: Upload package
@@ -203,6 +204,7 @@ jobs:
 
       - name: Package macOS
         run: |
+          # We must enter the package/ directory in order to create a flat tarball (i.e. without a directory in it).
           cd package
           tar -czvf ../${{ env.PACKAGE_FILE }} *
 
@@ -236,9 +238,10 @@ jobs:
           target: wasm32-unknown-unknown
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: "16"
+          registry-url: https://registry.npmjs.org
 
       # wasm-bindgen-cli version must match wasm-bindgen crate version.
       # Be sure to update in test_web.yml, web/Cargo.toml and web/README.md.
@@ -285,9 +288,8 @@ jobs:
 
       - name: Package selfhosted
         if: ${{ !matrix.demo }}
-        run: |
+        run: zip -r release.zip .
-          cd web/packages/selfhosted/dist/
+        working-directory: web/packages/selfhosted/dist
-          zip -r release.zip .
 
       - name: Upload selfhosted
         if: ${{ !matrix.demo }}
@@ -300,6 +302,13 @@ jobs:
           asset_name: ${{ needs.create-nightly-release.outputs.package_prefix }}-web-selfhosted.zip
           asset_content_type: application/zip
 
+      - name: Publish npm package
+        if: ${{ !matrix.demo }}
+        run: npm publish
+        working-directory: web/packages/selfhosted/dist
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
       - name: Upload generic extension
         if: ${{ !matrix.demo }}
         uses: actions/upload-release-asset@v1
@@ -346,8 +355,6 @@ jobs:
       - name: Update web demo
         if: matrix.demo
         run: |
-          cd demo/
-
           # Delete the old build.
           rm -f *.js *.wasm *.html
 
@@ -359,6 +366,7 @@ jobs:
           git config user.email "ruffle@ruffle.rs"
           git add -A
           git commit --amend -m "Nightly build ${{ needs.create-nightly-release.outputs.date }}"
+        working-directory: demo
 
       - name: Push web demo
         if: github.repository == 'ruffle-rs/ruffle' && matrix.demo
@@ -382,8 +390,6 @@ jobs:
       - name: Update JS docs
         if: ${{ !matrix.demo }}
         run: |
-          cd js-docs/
-
           # Delete the old docs
           rm -rf master/
 
@@ -395,6 +401,7 @@ jobs:
           git config user.email "ruffle@ruffle.rs"
           git add -A
           git commit --amend -m "Nightly build ${{ needs.create-nightly-release.outputs.date }}"
+        working-directory: js-docs
 
       - name: Push JS docs
         if: github.repository == 'ruffle-rs/ruffle' && !matrix.demo

web/packages/selfhosted/npm-package.json5

@@ -0,0 +1,14 @@
+{
+    "name": "@ruffle-rs/ruffle",
+    "version": null, // Filled by Webpack.
+    "description": "Putting Flash back on the web. Ruffle will polyfill all Flash content and replace it with the Ruffle flash player.",
+    "license": "(MIT OR Apache-2.0)",
+    "keywords": [
+        "flash",
+        "swf",
+    ],
+    "homepage": "https://ruffle.rs",
+    "bugs": "https://github.com/ruffle-rs/ruffle/issues",
+    "repository": "github:ruffle-rs/ruffle",
+    "main": "ruffle.js",
+}

web/packages/selfhosted/package.json

@@ -20,6 +20,7 @@
     },
     "devDependencies": {
         "@wdio/cli": "^7.16.12",
+        "json5": "^2.2.0",
         "webpack": "^5.65.0",
         "webpack-cli": "^4.9.1",
         "webpack-dev-server": "^4.7.2"

web/packages/selfhosted/webpack.config.js

@@ -1,8 +1,31 @@
 /* eslint-env node */
 
 const path = require("path");
+const json5 = require("json5");
 const CopyPlugin = require("copy-webpack-plugin");
 
+function transformPackage(content) {
+    const package = json5.parse(content);
+
+    const packageVersion = process.env.npm_package_version;
+
+    const versionChannel = process.env.CFG_RELEASE_CHANNEL || "nightly";
+
+    const buildDate = new Date()
+        .toISOString()
+        .substring(0, 10)
+        .replace(/-/g, ".");
+
+    // The npm registry requires the version to monotonically increase,
+    // so append the build date onto the end of the package version.
+    package.version =
+        versionChannel !== "stable"
+            ? `${packageVersion}-${versionChannel}.${buildDate}`
+            : packageVersion;
+
+    return JSON.stringify(package);
+}
+
 module.exports = (_env, _argv) => {
     const mode = process.env.NODE_ENV || "production";
     console.log(`Building ${mode}...`);
@@ -24,7 +47,15 @@ module.exports = (_env, _argv) => {
         devtool: "source-map",
         plugins: [
             new CopyPlugin({
-                patterns: [{ from: "LICENSE*" }, { from: "README.md" }],
+                patterns: [
+                    {
+                        from: "npm-package.json5",
+                        to: "package.json",
+                        transform: transformPackage,
+                    },
+                    { from: "LICENSE*" },
+                    { from: "README.md" },
+                ],
             }),
         ],
     };