2b:null 2c:["$","title",null,{"children":"Ora | Victor Didenko | Observable"}] 31:T498,{ while (true) { let timeout = 2500 let content let spinner spinner = ora('Loading unicorns') yield html`${spinner.start()}

` await Promises.tick(timeout) content = html`${spinner.succeed()}` yield html`${content}

` spinner = ora('Loading rainbows') yield html`${content}${spinner.start()}

` await Promises.tick(timeout) content = html`${content}${spinner.warn()}` yield html`${content}

` spinner = ora('Loading dwarfs') yield html`${content}${spinner.start()}

` await Promises.tick(timeout) content = html`${content}${spinner.info()}` yield html`${content}

` spinner = ora('Loading sadness') yield html`${content}${spinner.start()}
` await Promises.tick(timeout) content = html`${content}${spinner.fail()}` yield html`${content}
` spinner = ora('Creating magic world') yield html`${content}${spinner.start()}` await Promises.tick(timeout) content = html`${content}${spinner.stopAndPersist({ symbol: '🦄' })}` yield content await Promises.tick(timeout) } }32:T48e,md`### ora(text) ### ora(options) If a string is provided, it is treated as a shortcut for \`options.text\`. #### options Type: \`object\` ##### text Type: \`string\` Text to display after the spinner. ##### prefixText Type: \`string\` Text to display before the spinner. ##### spinner Type: \`string | object\`
Default: \`'dots'\` Name of one of the [provided spinners](https://github.com/sindresorhus/cli-spinners/blob/master/spinners.json).
See [examples](https://observablehq.com/@victordidenko/ora-built-in-spinner-examples). Or an object like: \`\`\`js { interval: 80, // Optional frames: ['-', '+', '-'] } \`\`\` ##### width Type: \`number\`
Default: \`20\` Spinner width. ##### color Type: \`string\`
Default: \`'grey'\`
Color of the spinner, can be any color, valid in CSS. ##### textColor Type: \`string\`
Default: \`'grey'\`
Color of the prefix and postfix text, can be any color, valid in CSS. ##### interval Type: \`number\`
Default: Provided by the spinner or \`100\` Interval between each frame. Spinners provide their own recommended interval, so you don't really need to specify this. `33:T6bc,md`#### .start(text?) Start the spinner. Set the current text if \`text\` is provided. #### .stop() Stop and clear the spinner. #### .succeed(text?) Stop the spinner, change it to ✓ and persist the current text, or \`text\` if provided. #### .fail(text?) Stop the spinner, change it to ✗ and persist the current text, or \`text\` if provided. #### .warn(text?) Stop the spinner, change it to ❢ and persist the current text, or \`text\` if provided. #### .info(text?) Stop the spinner, change it to i and persist the current text, or \`text\` if provided. #### .stopAndPersist(options?) Stop the spinner and change the symbol or text. ##### options Type: \`object\` ###### symbol Type: \`string\`
Symbol to replace the spinner with. ###### text Type: \`string\`
Default: Current \`text\` Text to be persisted after the symbol. ###### prefixText Type: \`string\`
Default: Current \`prefixText\` Text to be persisted before the symbol. ###### color Type: \`string\`
Default: Current \`color\` Color of the symbol, can be any color, valid in CSS. ###### textColor Type: \`string\`
Default: Current \`textColor\` Color of the prefix and postfix text, can be any color, valid in CSS. #### .clear() Clear the spinner. #### .render() Manually render a new frame. #### .frame() Get a new frame. #### .text Change the text after the spinner. #### .prefixText Change the text before the spinner. #### .color Change the spinner color. #### .textColor Change the prefix and postfix color. #### .spinner Change the spinner. ##### .width Change spinner width. `34:Tad1,class Ora { constructor(config = defaults) { const opts = { ...defaults, ...(typeof config === 'string' ? { text: config } : config) } this.id = undefined; this.content = html`

` this.spinner = opts.spinner this.width = opts.width this.text = opts.text this.prefixText = opts.prefixText this.color = opts.color this.textColor = opts.textColor this.interval = opts.interval || this.spinner.interval || 100 } get spinner() { return this._spinner } set spinner(spinner) { this.frameIndex = 0 if (typeof spinner === 'object') { if (spinner.frames === undefined) { throw new Error('The given spinner must have a `frames` property') } this._spinner = spinner } else if (spinner === undefined) { this._spinner = cliSpinners.dots } else if (cliSpinners[spinner]) { this._spinner = cliSpinners[spinner] } else { throw new Error(`There is no built-in spinner named '${spinner}'. See https://github.com/sindresorhus/cli-spinners/blob/master/spinners.json for a full list.`) } } frame(config = {}) { const { frames } = this.spinner const prefixText = config.prefixText || this.prefixText const symbol = config.symbol || frames[this.frameIndex] const color = config.color || this.color const text = config.text || this.text const textColor = config.textColor || this.textColor this.frameIndex = ++this.frameIndex % frames.length return [ prefixText ? colorize(textColor, prefixText) : undefined, colorize(color, symbol.replace(/\s/g, ' '), this.width), text ? colorize(textColor, text) : undefined ].filter(e => e).join(' ') } clear() { this.content.innerHTML = '' } // render frame render(config = {}) { this.content.innerHTML = this.frame(config) } // start spinner start(text) { if (text) { this.text = text } this.stop() this.render() this.id = setInterval(this.render.bind(this), this.interval) invalidation.then(this.stop.bind(this)) // stop if re-evaluated return this.content } // stop spinner stop() { clearInterval(this.id) this.id = undefined this.frameIndex = 0 this.clear() } succeed(text) { return this.stopAndPersist({ symbol: '✓', color: 'green', text }) } fail(text) { return this.stopAndPersist({ symbol: '✗', color: 'red', text }) } warn(text) { return this.stopAndPersist({ symbol: '❢', color: 'gold', text }) } info(text) { return this.stopAndPersist({ symbol: 'i', color: 'blue', text }) } stopAndPersist(config = {}) { this.stop() this.render(config) return this.content } }35:[] 2f:{"id":"c6572c828d70b6c5","slug":"ora","title":"Ora","thumbnail":"a6cd22326adc920b20eb527b70e3de38b6d25bb230b4a39d66fc5183e75710e2","access_level":"public","create_time":"$D2019-08-04T10:50:43.428Z","update_time":"$D2019-08-26T19:54:12.644Z","view_time":null,"first_public_time":"$D2019-08-04T22:51:39.356Z","fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"42f2e5e10c6d5a77","login":"victordidenko","name":"Victor Didenko","avatar_url":"https://avatars-next.observableusercontent.com/2e00c06f6cef6b68277da22d45c6ce8dbcd16cf89d32fa28273cb69fc2443e78","tier":"starter_2024"},"version":678,"publish_version":678,"role":null,"authored":false,"authors":[{"type":"individual","id":"51128b4ac51e3b3e","login":"victordidenko","name":"Victor Didenko","avatar_url":"https://avatars-next.observableusercontent.com/2e00c06f6cef6b68277da22d45c6ce8dbcd16cf89d32fa28273cb69fc2443e78","tier":null}],"members":[{"type":"individual","id":"51128b4ac51e3b3e","login":"victordidenko","name":"Victor Didenko","avatar_url":"https://avatars-next.observableusercontent.com/2e00c06f6cef6b68277da22d45c6ce8dbcd16cf89d32fa28273cb69fc2443e78","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Ora","cells":[{"id":0,"value":"md`# Ora\n

*Elegant Observable spinner*

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"{\n const resources = ['unicorns', 'rainbows', 'dwarfs', 'trees', 'colors', 'grass', 'rocks', 'flowers', 'sun']\n const colors = ['red', 'cyan', 'green', 'gold', 'blue']\n const random = (arr) => arr[Math.floor(Math.random() * arr.length)]\n\n const spinner = ora(`Loading ${random(resources)}`)\n yield spinner.start()\n\n const i = setInterval(() => {\n spinner.color = random(colors)\n spinner.text = `Loading ${random(resources)}`\n }, 1000)\n invalidation.then(() => clearInterval(i))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"md`This is port of [ora](https://github.com/sindresorhus/ora) command line spinner, modified to use in Observable notebooks.\nSupports all reasonable [options](https://github.com/sindresorhus/ora#api) and [methods](https://github.com/sindresorhus/ora#instance) from original package.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"md`## Usage\n~~~js\nimport {ora} from \"@victordidenko/ora\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":451,"value":"{\n const spinner = ora('Wait for async operation')\n yield spinner.start()\n await Promises.tick(5000) // any async operation\n yield spinner.succeed('Async operation completed')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"md`## Promise example\n\nAllows to starts a spinner for a promise.
\nThe spinner is stopped with \\`.succeed()\\` if the promise fulfills or with \\`.fail()\\` if it rejects.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":625,"value":"viewof restartPromise = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"{\n restartPromise\n yield* promise(\n Promises.tick(5000).then(v => 'Promise resolved!'),\n 'Wait for promise to resolve'\n )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"md`## Viewof example\n\n(thx to [Fabian Iwand](https://observablehq.com/@mootari)'s suggestion and his [displaying-progress](https://observablehq.com/@mootari/displaying-progress))
\nAllows to use Ora with \\`viewof\\` API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"viewof restartViewof = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"viewof data = {\n restartViewof\n return oraview(\n Promises.tick(5000).then(() => Array.from({ length: 10000 }, () => Math.random())),\n 'Wait for data to compute'\n )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"sum = data.reduce((s, v) => s + v, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"md`## API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":401,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"md`### Instance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"md`### promise(action, text)\n### promise(action, options)\n\nStarts a spinner for a promise. The spinner is stopped with \\`.succeed()\\` if the promise fulfills or with \\`.fail()\\` if it rejects.\n\n#### action\n\nType: \\`Promise\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"md`### oraview(action, text)\n### oraview(action, options)\n\n\\`viewof\\` compatible generator. Similar to \\`promise\\`, starts a spinner for a promise. But spinner always stopped with \\`stop()\\`, and resolved value of the promise becomes \\`viewof\\` result.\n\n#### action\n\nType: \\`Promise\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"cliSpinners = {\n const defaults = { dots: { interval: 80, frames: ['⠋','⠙','⠹','⠸','⠼','⠴','⠦','⠧','⠇','⠏'] }}\n const link = 'https://raw.githubusercontent.com/sindresorhus/cli-spinners/master/spinners.json'\n return await fetch(link).then(r => r.ok ? r.json() : defaults).catch(() => defaults)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"function colorize(color, text, width) {\n const w = width ? `;display:inline-block;text-align:center;width:${width}px;` : ''\n return color ? `${text}` : text\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"defaults = ({\n text: null,\n prefixText: null,\n spinner: 'dots',\n width: 20,\n color: 'grey',\n textColor: 'grey',\n interval: null,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"function ora(config) {\n return new Ora(config)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"function* promise(action, config) {\n if (typeof action.then !== 'function') {\n throw new TypeError('Parameter `action` must be a Promise')\n }\n const spinner = ora(config)\n yield spinner.start()\n yield action.then(v => spinner.succeed(v), e => spinner.fail(e))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":590,"value":"function* oraview(action, config) {\n if (typeof action.then !== 'function') {\n throw new TypeError('Parameter `action` must be a Promise')\n }\n\n const spinner = ora(config)\n const content = spinner.start()\n const inspector = new Inspector(content)\n const identity = _ => _\n\n content.value = action.then(identity, identity).then(_ => {\n spinner.stop()\n inspector.fulfilled(_)\n return _\n })\n\n yield content\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":528,"value":"Inspector = (await require('@observablehq/notebook-inspector@1.1.1/dist/notebook-inspector.umd.js')).Inspector","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"