feat: Auto release @excalidraw/excalidraw-next on every change (#3614)

* feat: Auto release @excalidraw/excalidraw-next on every change

* fix

* fix name

* fix

* add logs

* use commithash

* yarn installå

* fix

* catch

* log

* fix

* uncomment

* remove console

* add logs

* list files changed between prev and current commit

* fetch last two commits

* remove logs

* fix

* update readme_next

* update readme before release

* temp commit to trigger release

* update package name to excalidraw-next

* bold

* remove temp branch

* add note about next

* fix

* fix

* fix

.github/workflows/autorelease-excalidraw.yml

@@ -0,0 +1,26 @@
+name: Auto release @excalidraw/excalidraw-next
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  Auto-release-excalidraw-next:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+      - name: Set up publish access
+        run: |
+          npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Auto release
+        run: |
+          yarn autorelease

package.json

@@ -104,6 +104,7 @@
     "test:other": "yarn prettier --list-different",
     "test:typecheck": "tsc",
     "test:update": "yarn test:app --updateSnapshot --watchAll=false",
-    "test": "yarn test:app"
+    "test": "yarn test:app",
+    "autorelease": "node scripts/autorelease.js"
   }
 }

scripts/autorelease.js

@@ -0,0 +1,51 @@
+const fs = require("fs");
+const { exec, execSync } = require("child_process");
+
+const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
+const excalidrawPackage = `${excalidrawDir}/package.json`;
+const pkg = require(excalidrawPackage);
+
+const getShortCommitHash = () => {
+  return execSync("git rev-parse --short HEAD").toString().trim();
+};
+
+const publish = () => {
+  try {
+    execSync(`yarn  --frozen-lockfile`);
+    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
+    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
+    execSync(`yarn --cwd ${excalidrawDir} publish`);
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// get files changed between prev and head commit
+exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
+  if (error || stderr) {
+    console.error(error);
+    process.exit(1);
+  }
+
+  const changedFiles = stdout.trim().split("\n");
+  const filesToIgnoreRegex = /src\/excalidraw-app|packages\/utils/;
+
+  const excalidrawPackageFiles = changedFiles.filter((file) => {
+    return file.indexOf("src") >= 0 && !filesToIgnoreRegex.test(file);
+  });
+
+  if (!excalidrawPackageFiles.length) {
+    process.exit(0);
+  }
+
+  // update package.json
+  pkg.version = `${pkg.version}-${getShortCommitHash()}`;
+  pkg.name = "@excalidraw/excalidraw-next";
+  fs.writeFileSync(excalidrawPackage, JSON.stringify(pkg, null, 2), "utf8");
+
+  // update readme
+  const data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
+  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
+
+  publish();
+});

src/packages/excalidraw/README.md

@@ -24,6 +24,10 @@ By default it will try to load the files from `https://unpkg.com/@excalidraw/exc
 
 If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.
 
+#### Note
+
+**If you don't want to wait for the next stable release and try out the unreleased changes you can use [@excalidraw/excalidraw-next](https://www.npmjs.com/package/@excalidraw/excalidraw-next).**
+
 ### Demo
 
 [Try here](https://codesandbox.io/s/excalidraw-ehlz3).

src/packages/excalidraw/README_NEXT.md

@@ -1,3 +1,13 @@
+<!-- stable-readme-start-->
+
+## Note
+
+**This is an unstable release and not recommended for production. If you don't want to wait for the stable release and try out the unreleased changes you can use this.**
+
+For stable release please use [@excalidraw/excalidraw](https://www.npmjs.com/package/@excalidraw/excalidraw).
+
+<!-- stable-readme-end-->
+
 ### Excalidraw
 
 Excalidraw exported as a component to directly embed in your projects.
@@ -7,20 +17,20 @@ Excalidraw exported as a component to directly embed in your projects.
 You can use npm
 
 ```
-npm install react react-dom @excalidraw/excalidraw
+npm install react react-dom @excalidraw/excalidraw-next
 ```
 
 or via yarn
 
 ```
-yarn add react react-dom @excalidraw/excalidraw
+yarn add react react-dom @excalidraw/excalidraw-next
 ```
 
 After installation you will see a folder `excalidraw-assets` and `excalidraw-assets-dev` in `dist` directory which contains the assets needed for this app in prod and dev mode respectively.
 
 Move the folder `excalidraw-assets` and `excalidraw-assets-dev` to the path where your assets are served.
 
-By default it will try to load the files from `https://unpkg.com/@excalidraw/excalidraw/{currentVersion}/dist/`
+By default it will try to load the files from `https://unpkg.com/@excalidraw/excalidraw-next/dist/`
 
 If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.
 
@@ -38,7 +48,7 @@ If you are using a Web bundler (for instance, Webpack), you can import it as an
 
 ```js
 import React, { useEffect, useState, useRef } from "react";
-import Excalidraw from "@excalidraw/excalidraw";
+import Excalidraw from "@excalidraw/excalidraw-next";
 import InitialData from "./initialData";
 
 import "./styles.scss";
@@ -156,13 +166,13 @@ import { useState, useEffect } from "react";
 export default function IndexPage() {
   const [Comp, setComp] = useState(null);
   useEffect(() => {
-    import("@excalidraw/excalidraw").then((comp) => setComp(comp.default));
+    import("@excalidraw/excalidraw-next").then((comp) => setComp(comp.default));
   });
   return <>{Comp && <Comp />}</>;
 }
 ```
 
-The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
+The `types` are available at `@excalidraw/excalidraw-next/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
 
 #### In Browser
 
@@ -173,7 +183,7 @@ For development use :point_down:
 ```js
 <script
   type="text/javascript"
-  src="https://unpkg.com/@excalidraw/excalidraw@0.8.0/dist/excalidraw.development.js"
+  src="https://unpkg.com/@excalidraw/excalidraw-next/dist/excalidraw.development.js"
 ></script>
 ```
 
@@ -182,7 +192,7 @@ For production use :point_down:
 ```js
 <script
   type="text/javascript"
-  src="https://unpkg.com/@excalidraw/excalidraw@0.8.0/dist/excalidraw.production.min.js"
+  src="https://unpkg.com/@excalidraw/excalidraw-next/dist/excalidraw.production.min.js"
 ></script>
 ```
 
@@ -201,7 +211,7 @@ You will need to make sure `react`, `react-dom` is available as shown in the bel
 
     <script
       type="text/javascript"
-      src="https://unpkg.com/@excalidraw/excalidraw@0.8.0/dist/excalidraw.development.js"
+      src="https://unpkg.com/@excalidraw/excalidraw-next/dist/excalidraw.development.js"
     ></script>
   </head>
 
@@ -495,7 +505,7 @@ This callback is triggered when the shareable-link button is clicked in the expo
 Determines the language of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below.
 
 ```js
-import { defaultLang, languages } from "@excalidraw/excalidraw";
+import { defaultLang, languages } from "@excalidraw/excalidraw-next";
 ```
 
 | name | type |
@@ -636,7 +646,7 @@ The unique id of the excalidraw component. This can be used to identify the exca
 **How to use**
 
 <pre>
-import { getSceneVersion } from "@excalidraw/excalidraw";
+import { getSceneVersion } from "@excalidraw/excalidraw-next";
 getSceneVersion(elements:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>)
 </pre>
 
@@ -653,7 +663,7 @@ isInvisiblySmallElement(element:  <a href="https://github.com/excalidraw/excalid
 **How to use**
 
 ```js
-import { isInvisiblySmallElement } from "@excalidraw/excalidraw";
+import { isInvisiblySmallElement } from "@excalidraw/excalidraw-next";
 ```
 
 Returns `true` if element is invisibly small (e.g. width & height are zero).
@@ -669,7 +679,7 @@ getElementsMap(elements:  <a href="https://github.com/excalidraw/excalidraw/blob
 **How to use**
 
 ```js
-import { getElementsMap } from "@excalidraw/excalidraw";
+import { getElementsMap } from "@excalidraw/excalidraw-next";
 ```
 
 This function returns an object where each element is mapped to its id.
@@ -687,7 +697,7 @@ restoreAppState(appState:  <a href="https://github.com/excalidraw/excalidraw/blo
 **_How to use_**
 
 ```js
-import { restoreAppState } from "@excalidraw/excalidraw";
+import { restoreAppState } from "@excalidraw/excalidraw-next";
 ```
 
 This function will make sure all the keys have appropriate values in [appState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) and if any key is missing, it will be set to default value. If you pass `localAppState`, `localAppState` value will be preferred over the `appState` passed in params.
@@ -703,7 +713,7 @@ restoreElements(elements:  <a href="https://github.com/excalidraw/excalidraw/blo
 **_How to use_**
 
 ```js
-import { restoreElements } from "@excalidraw/excalidraw";
+import { restoreElements } from "@excalidraw/excalidraw-next";
 ```
 
 This function will make sure all properties of element is correctly set and if any attribute is missing, it will be set to default value.
@@ -719,7 +729,7 @@ restoreElements(data:  <a href="https://github.com/excalidraw/excalidraw/blob/ma
 **_How to use_**
 
 ```js
-import { restore } from "@excalidraw/excalidraw";
+import { restore } from "@excalidraw/excalidraw-next";
 ```
 
 This function makes sure elements and state is set to appropriate values and set to default value if not present. It is combination of [restoreElements](#restoreElements) and [restoreAppState](#restoreAppState)
@@ -760,7 +770,7 @@ Takes the scene elements and state and returns a JSON string. Deleted `elements`
 **How to use**
 
 ```js
-import { exportToCanvas } from "@excalidraw/excalidraw";
+import { exportToCanvas } from "@excalidraw/excalidraw-next";
 ```
 
 This function returns the canvas with the exported elements, appState and dimensions.
@@ -786,7 +796,7 @@ exportToBlob(
 **How to use**
 
 ```js
-import { exportToBlob } from "@excalidraw/excalidraw";
+import { exportToBlob } from "@excalidraw/excalidraw-next";
 ```
 
 Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob). It internally uses [canvas.ToBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob).