yourjs-box 1.4.0 → 1.6.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-present Christopher West
+Copyright (c) 2023-present Chris West
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -40,6 +40,7 @@ If the editor already has code in it you are asked before it is replaced.
 
 ### Toolbar
 
+- The **⋯** button opens a menu (see below).
 - **Clear** removes everything from the console.  Code can also call
   `console.clear()`.
 - The **layout** button switches between showing the editor beside or below
@@ -50,8 +51,20 @@ If the editor already has code in it you are asked before it is replaced.
 - **Run** runs the next block of code.
 - Clicking the **logo** opens the About window, which shows the version, this
   console's settings and keyboard shortcuts.
-- The **⋯** button opens a menu with:
+- **History** (or <kbd>Alt</kbd>/<kbd>&#8997;</kbd>+<kbd>H</kbd>) lists the code
+  that was run so it can be put back into the editor.  Like the browser's
+  console, pressing <kbd>&uarr;</kbd> when the cursor is at the very start of
+  the editor (with nothing selected) shows the previous code that was run and
+  <kbd>&darr;</kbd> at the very end goes forward again and eventually back to
+  the code that hasn't been run yet.  After running code from the history, the
+  code that hasn't been run yet comes back.  Hidden blocks aren't in the
+  history.
+- The **&#8943;** menu has:
   - **Text size**, which is remembered for every console on the same site.
+  - **Open**, which loads a JavaScript file as the code that the console starts
+    with (its hidden blocks are hidden and Reset goes back to it).
+  - **Save**, which saves the code that already ran and the code in the editor
+    as a JavaScript file that can be opened later.
   - **Pop out into a window**, which moves the console into a separate window
     while the code keeps running in the page (so in window mode the code can
     still change the page).  Close the window or click **Bring it back** to
@@ -65,12 +78,29 @@ If the editor already has code in it you are asked before it is replaced.
     (eg. an infinite loop) by starting a new worker.
   - **About JS Box**
 
+### Right-Clicking Values
+
+Right-click any value in the output (including values inside of expanded
+objects and arrays) for a menu with:
+
+- **Copy as JSON** and **Save as JSON&hellip;**.  Maps and Sets become arrays
+  and BigInts become strings.  Circular references (an object inside of itself)
+  are left out and a message says how many were left out.
+- **Store as global variable**, which stores the actual value (not a copy) as
+  `temp1`, `temp2`, etc. so that later code can use it (in window mode it is
+  stored on the page's `window`).
+- **Copy property path** (for properties and array items), which copies the
+  path from the logged value like `people[0].name`.
+- **Refresh** (for objects, arrays, etc.), which shows the value as it is now
+  if the code has changed it.  Anything that was expanded stays expanded.
+
 ### Attributes
 
 | Attribute | Description |
 | --- | --- |
 | `data-block-type` | `"classic"` (default) runs each block like a regular `<script>` so top-level declarations are shared between blocks.  `"module"` runs each block like a `<script type="module">`.  See below. |
 | `data-show-results` | `"false"` stops the value of the last expression in each block from being shown. |
+| `data-imports-url` | Where packages imported by name are loaded from.  See "Importing Packages" below. |
 | `data-libraries-url` | Where to load Vue, Ace, Prism and Acorn from.  See "Self-Hosting the Libraries" below. |
 | `data-runner` | `"worker"` (default) runs the code in a Web Worker.  `"window"` runs it directly in the page.  See below. |
 | `data-divider-orient` | `"vertical"` puts the editor beside the output and `"horizontal"` puts it below.  If not specified the editor is beside the output unless the console is narrower than 600px. |
@@ -92,10 +122,38 @@ one block can be used in the next, but `await` can only be used inside of
 `<script type="module">` instead:
 
 - Top-level `await` works.
-- `import` works (eg. `import {camelCase} from 'https://cdn.jsdelivr.net/npm/lodash-es/+esm';`).
+- `import` works (eg. `import {camelCase} from 'lodash-es';`).
 - Top-level declarations stay inside of their block, just like in a module.
   Use `globalThis` to share values between blocks.
 
+### Importing Packages
+
+npm packages can be imported by name.  They are loaded from
+[esm.sh](https://esm.sh/), which turns npm packages into modules that work in
+the browser:
+
+```js
+// In module blocks (data-block-type="module")
+import _ from 'lodash';
+import {format} from 'date-fns@4';
+
+// In any block (including classic blocks), inside of async code
+const {default: dayjs} = await import('dayjs');
+```
+
+Relative paths (eg. `./utils.js`), URLs (eg. `https://example.com/x.js`) and
+`node:` imports are left alone.  Packages that need Node.js (eg. ones that use
+`fs`) can't run in a browser.
+
+To load packages from somewhere else set `data-imports-url` to a URL where
+`{specifier}` is replaced with what was imported (eg. `lodash@4/fp`):
+
+| Where | `data-imports-url` |
+| --- | --- |
+| esm.sh (the default) | `https://esm.sh/{specifier}` |
+| jsDelivr | `https://cdn.jsdelivr.net/npm/{specifier}/+esm` |
+| Turned off (only URLs and paths can be imported) | `""` |
+
 ### Self-Hosting the Libraries
 
 The console's interface uses [Vue](https://vuejs.org/),
@@ -174,7 +232,7 @@ functions).  The options are:
 | `placement` | Where the console goes:  `"fill"` (default) replaces the target's contents, `"append"` and `"prepend"` add it inside of the target, `"replace"` replaces the target itself and `"before"` and `"after"` add it next to the target. |
 | `height` | The CSS height of the console (a number is treated as pixels).  Defaults to `"100%"` so the console fills its container.  It is never less than 150px. |
 | `code` | The code that the console starts with. |
-| `runner`, `blockType`, `showResults`, `hidePrefix`, `dividerOrient`, `theme`, `librariesUrl` | The same as the `data-*` attributes above. |
+| `runner`, `blockType`, `showResults`, `hidePrefix`, `dividerOrient`, `theme`, `importsUrl`, `librariesUrl` | The same as the `data-*` attributes above. |
 
 `YourJSBox.version` is the version of JS Box that was loaded.
 
@@ -201,14 +259,25 @@ between blocks.
 Install the development dependencies by running `npm install`.
 
 - `npm run dev` builds, rebuilds whenever one of the files in `src/` changes
-  and serves the examples at http://localhost:3000/examples/ with the browser
-  reloading automatically after each rebuild.
+  and serves the examples at http://localhost:3000/examples/ (opening them in
+  your default browser) with the browser reloading automatically after each
+  rebuild.  Use `BROWSER=none npm run dev` to keep it from opening a browser.
 - `npm run build` builds the files in `dist/` once.
 - `npm test` builds and then runs the browser tests in `test/run.js` using your
   installed copy of Google Chrome (set `CHROME_PATH` to use another Chromium
   based browser).  An internet connection is needed because the console loads
   its libraries from CDNs.  Pass part of a test's name to run only matching
   tests (eg. `node test/run.js module`).
+- `npm run release -- <patch|minor|major>` releases a new version:  it checks
+  that you're on an up to date, clean `main`, runs the tests, runs
+  `npm version`, pushes `main` and then the tag (separately, because GitHub
+  Pages doesn't always deploy when they are pushed together), publishes to npm
+  and, once npm lists the new version, purges jsDelivr's cache.  Add
+  `--dry-run` to see what it would do or `--skip-tests` to skip the tests.
+- `npm run purge-cdn` purges jsDelivr's cache so that URLs like
+  `yourjs-box@1` point to the latest version right away.
+- In VS Code, **Terminal &rarr; Run Task&hellip;** has tasks for all of these
+  (eg. Build, Dev server, Test, Release&hellip; and Redeploy GitHub Pages).
 - `npm start` builds and then rebuilds whenever one of the files in `src/`
   changes (without serving anything).
 
@@ -224,7 +293,6 @@ test `dist/yourjs-box.js` or `dist/yourjs-box.min.js` instead of
 - Add `@timeout` annotation to the special comments that will allow you to input the amount of seconds to wait since the last call to a console logging function before automatically running the next comment segmented block.
 - Allow for TypeScript
 - Allow for CoffeeScript
-- Allow code to run in main window.
 
 ## License
 
@@ -232,4 +300,4 @@ Released under the [MIT License](LICENSE).  You're free to use, modify and
 distribute it, including in commercial projects, as long as the copyright and
 license notice is kept.
 
-Copyright (c) 2023-present Christopher West
+Copyright (c) 2023-present Chris West