diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 02752969..24ed8574 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,7 +9,7 @@ jobs: - uses: actions/setup-node@v1 with: - node-version: "14.x" + node-version: "20.x" - name: Install run: | @@ -19,5 +19,4 @@ jobs: - name: Test run: | - sudo apt-get install xvfb - xvfb-run --auto-servernum npm run test:ci + npm run test diff --git a/.gitignore b/.gitignore index 004a3f5b..46c61afd 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,4 @@ package-lock.json # Inserted automatically by Gitmesh /.dat - +/.build diff --git a/.npmignore b/.npmignore index f605ddb0..11edbdb3 100644 --- a/.npmignore +++ b/.npmignore @@ -1,2 +1,3 @@ docs types +.build diff --git a/_test/fixtures/testcafe.js b/_test/fixtures/testcafe.js deleted file mode 100644 index 53dda2c0..00000000 --- a/_test/fixtures/testcafe.js +++ /dev/null @@ -1,65 +0,0 @@ -import Tonic from '@socketsupply/tonic' -import { Components } from '../../index.js' -import { html } from '../util.js' - -import './test-form.js' - -window.promiseCounter = 0 -const OldPromise = window.Promise -window.Promise = function () { - window.promiseCounter++ - console.trace('a promise here') - return new OldPromise(...arguments) -} - -Components(Tonic) - -document.body.appendChild(html` -
- - - -
-`) diff --git a/_test/index.html b/_test/index.html new file mode 100644 index 00000000..7238082f --- /dev/null +++ b/_test/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + diff --git a/_test/old/build.js b/_test/old/build.js deleted file mode 100644 index 2a9fcb1e..00000000 --- a/_test/old/build.js +++ /dev/null @@ -1,82 +0,0 @@ -import fs from 'node:fs' -import path from 'node:path' - -const root = path.join(__dirname, '..', '..') - -const components = fs - .readFileSync(path.join(root, 'components.txt'), 'utf8') - .split('\n') - .filter(Boolean) - -const sections = components - .map(f => { - const fileName = path.join(root, f, 'test.html') - - let htmlText - try { - htmlText = fs.readFileSync(fileName, 'utf8') - } catch (err) { - // Missing file, skip. - return '' - } - - return ' ' + htmlText - }) - .join('\n') - -const index = ` - - - Tonic - Component Based Architecture - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - ${sections} -
- - - -` - -fs.writeFileSync(path.join(__dirname, '..', '..', 'docs', 'test.html'), index) diff --git a/_test/old/index.styl b/_test/old/index.styl deleted file mode 100644 index fdbc1608..00000000 --- a/_test/old/index.styl +++ /dev/null @@ -1,94 +0,0 @@ -body#test - - aside - width 600px - font 14px var(--tonic-monospace) - white-space pre-wrap - padding 20px 60px 60px 60px - overflow scroll - position fixed - top 0 - right 0 - bottom 0 - background-color #f8f8f8 - - span - display block - - &.title - margin-top 30px - - &.result.OK - color green - - &.result:not(.OK) - color red - - .test-summary - display flex - - #passing, - #total, - #status - margin 0 10px - margin-right 80px - - h1 - font-weight 700 - display block - margin 8px 4px - padding 0 - - label - margin 0 4px - text-transform uppercase - display block - - #status - &:not(.fail) - color green - - &.fail - color red - - > section - left 0 - padding-bottom 0 - margin 0 auto - margin-right 600px - display flex - flex-wrap wrap - justify-content flex-start - - h2 - flex-basis 100% - margin 60px 1.5% 30px 1.5% - - .test-container - border 1px solid #eaeaea - flex-basis 47% - padding 20px - margin 1.5% - display flex - flex-wrap wrap - justify-content space-between - align-items center - - > span - display block - width 100% - - &:first-of-type - font 14px var(--tonic-monospace) - width 100% - display block - padding 15px 0 - - &.dark - background-color #333333 - > span - color white - - tonic-toggle - display block - width 100% diff --git a/_test/old/tape.js b/_test/old/tape.js deleted file mode 100644 index d6954c60..00000000 --- a/_test/old/tape.js +++ /dev/null @@ -1,67 +0,0 @@ -import tape from '@pre-bundled/tape' -const stream = tape.createStream({ objectMode: true }) - -const inc = id => { - const el = document.getElementById(id) - const count = el.querySelector('.value') - - return () => { - const val = count.textContent.trim() - count.textContent = parseInt(val, 10) + 1 - } -} - -const incPassing = inc('passing') -const incTotal = inc('total') - -const output = document.querySelector('#test-output') - -let count = 0 -let passed = 0 - -stream.on('data', data => { - if (typeof data === 'string') { - output.innerHTML += `#${data}` - } - - if (data.type === 'test') { - output.innerHTML += `# ${data.name}\n` - return - } - - if (data.type === 'assert') { - ++count - incTotal() - - const status = data.ok ? 'OK' : 'FAIL' - output.innerHTML += `${status} ${data.id} ${data.name}` - - if (!data.ok) { - console.error(data) - return - } - - ++passed - incPassing() - return - } - - if (data.type === 'end') { - const ok = passed === count ? 'OK' : 'FAIL' - - const status = document.getElementById('status') - const value = status.querySelector('.value') - - if (!status.classList.contains('fail')) { - value.textContent = ok - } - - if (!ok) { - status.classList.add('fail') - } - - output.innerHTML += `\n# ${ok ? 'ok' : 'not ok'}` - } -}) - -export { tape } diff --git a/_test/old/test.js b/_test/old/test.js deleted file mode 100644 index 53a1a79d..00000000 --- a/_test/old/test.js +++ /dev/null @@ -1,42 +0,0 @@ -import { Tonic } from '@socketsupply/tonic' -import { Components } from '../..' - -import 'tape.js' - -Components(Tonic) - -async function ready () { - await import('../../router/test') - await import('../../panel/test') - await import('../../dialog/test') - await import('../../tabs/test') - await import('../../windowed/test') - await import('../../tooltip/test') - await import('../../popover/test') - await import('../../badge/test') - await import('../../button/test') - await import('../../chart/test') - await import('../../checkbox/test') - await import('../../icon/test') - await import('../../input/test') - await import('../../progress-bar/test') - await import('../../profile-image/test') - await import('../../range/test') - await import('../../select/test') - await import('../../textarea/test') - await import('../../toaster/test') - await import('../../toaster-inline/test') - await import('../../toggle/test') - - document.addEventListener('keydown', e => { - if (e.keyCode === 9) { - document.body.classList.add('show-focus') - } - }) - - document.addEventListener('click', e => { - document.body.classList.remove('show-focus') - }) -} - -document.addEventListener('DOMContentLoaded', ready) diff --git a/_test/testcafe/test-form.js b/_test/testcafe/test-form.js deleted file mode 100644 index c65d634a..00000000 --- a/_test/testcafe/test-form.js +++ /dev/null @@ -1,42 +0,0 @@ -/* global fixture, test, window */ -import { Selector } from 'testcafe' - -fixture`Test form` - .page`http://localhost:8030/` - -test('can click button', async (t) => { - const form = Selector('.tc-test-form') - - const button = form.find('button').withText(/Submit/i) - const input = form.find('#tonic--input_test-form-input') - - await t.typeText(input, 'sample text') - await t.click(button) - - const span = form.find('span').withText(/Text is: sample text/i) - await t.expect(span.visible).eql(true) - - const c = await t.eval(() => { - return window.promiseCounter - }) - await t.expect(c).eql(1) -}) - -test('can dispatch custome vent', async (t) => { - const parent = Selector('custom-event-parent') - - { - const span = parent.find('span').withText(/Text is: /i) - await t.expect(span.visible).eql(true) - await t.expect(span.textContent).eql('Text is: empty') - } - - const clickMe = parent.find('.test-click-me') - await t.click(clickMe) - - { - const span = parent.find('span').withText(/Text is: /i) - await t.expect(span.visible).eql(true) - await t.expect(span.textContent).eql('Text is: hmm') - } -}) diff --git a/_test/util.js b/_test/util.js index 34c86230..7966e97d 100644 --- a/_test/util.js +++ b/_test/util.js @@ -23,3 +23,8 @@ export function html ([str, ...strings], ...values) { const comp = new MainComp(str, strings, values) return comp } + +const qs = (s, p) => (p || document).querySelector(s) +const qsa = (s, p) => [...(p || document).querySelectorAll(s)] + +export { qs, qsa } diff --git a/accordion/test.js b/accordion/test.js index 1964888d..9cd360e9 100644 --- a/accordion/test.js +++ b/accordion/test.js @@ -1,9 +1,7 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' - -import { html } from '../_test/util' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) document.body.appendChild(html` diff --git a/badge/test.js b/badge/test.js index 2a5a90fc..e5c5e980 100644 --- a/badge/test.js +++ b/badge/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/button/test.js b/button/test.js index 3985d1ea..bf429572 100644 --- a/button/test.js +++ b/button/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/chart/test.js b/chart/test.js index 64557add..bcb6157b 100644 --- a/chart/test.js +++ b/chart/test.js @@ -1,10 +1,9 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' import chart from 'chart.js' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/checkbox/test.js b/checkbox/test.js index 91a4f52d..eee23295 100644 --- a/checkbox/test.js +++ b/checkbox/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/dialog/test.js b/dialog/test.js index 2620673a..eae606fc 100644 --- a/dialog/test.js +++ b/dialog/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' -import { html } from '../_test/util' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/form/test.js b/form/test.js index 70f7de5b..e0937635 100644 --- a/form/test.js +++ b/form/test.js @@ -1,7 +1,6 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util.js' import { Tonic } from '@socketsupply/tonic' import { TonicForm } from './index.js' import { Components } from '../index.js' diff --git a/icon/test.js b/icon/test.js index a6584f29..9226a3c4 100644 --- a/icon/test.js +++ b/icon/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/importmap.json b/importmap.json new file mode 100644 index 00000000..fdfdb597 --- /dev/null +++ b/importmap.json @@ -0,0 +1,6 @@ +{ + "imports": { + "@socketsupply/tonic": "npm:@socketsupply/tonic", + "chart.js": "npm:chart.js" + } +} diff --git a/index.js b/index.js index 6c1bafdb..987640b3 100644 --- a/index.js +++ b/index.js @@ -42,7 +42,7 @@ Components.Tonic = Tonic // // An example collection of components. // -export function Components (Tonic) { +function Components (Tonic) { if (once) { return } @@ -83,4 +83,5 @@ export function Components (Tonic) { Tonic.add(TonicToggle, 'tonic-toggle') } +export { Components } export default Components diff --git a/input/test.js b/input/test.js index 242bf97a..bf625bd5 100644 --- a/input/test.js +++ b/input/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/package.json b/package.json index 9ff439d0..38fb4ceb 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,11 @@ { "name": "@socketsupply/components", - "version": "14.0.13", + "version": "14.1.0", "description": "Example components", "type": "module", "scripts": { - "prepare": "npm run lint", - "prepublishOnly": "git push --follow-tags", "lint": "standard -v", - "test": "standard && esbuild --format=esm --bundle _test/index.js | tape-run", - "test:ci": "esbuild --format=esm --bundle _test/index.js | tape-run", - "test:open": "esbuild --format=esm --bundle _test/index.js | tape-run --browser chrome --keep-open", + "test": "npm run lint && ssc build -r", "pub": "npm pub && npm publish --registry https://npm.pkg.github.com" }, "repository": { @@ -30,12 +26,9 @@ }, "homepage": "https://github.com/socketsupply/components#readme", "devDependencies": { + "@socketsupply/socket": "github:socketsupply/socket#next", "@socketsupply/tonic": "15.0.0", - "standard": "16.0.4", - "tape-run": "9.0.0", "chart.js": "^2.9.2", - "esbuild": "0.13.8", - "qsa-min": "1.0.2", - "tapzero": "^0.6.0" + "standard": "16.0.4" } } diff --git a/panel/test.js b/panel/test.js index f1e80bad..9d54029b 100644 --- a/panel/test.js +++ b/panel/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) @@ -82,18 +81,18 @@ panelPositionButton.addEventListener('click', e => panelPosition.show()) test('opening a panel', async t => { const container = qs('#example-panel-default') - const overlay = qs('.tonic--overlay') + const overlay = qs('.tonic--dialog--overlay') const main = qs('main', container) const h3 = qs('h3', main) - t.ok(container) - t.ok(overlay) - t.ok(main) - t.ok(h3) + t.ok(container, 'container created') + t.ok(overlay, 'overlay created') + t.ok(main, 'main found') + t.ok(h3, 'h3 found') - t.equal(h3.textContent.trim(), 'Hello') + t.equal(h3.textContent.trim(), 'Hello', 'should contain "Hello"') - t.ok(container.hasAttribute('hidden')) + t.ok(container.hasAttribute('hidden'), 'should be hidden') await container.show() @@ -101,5 +100,5 @@ test('opening a panel', async t => { await container.hide() - t.ok(container.hasAttribute('hidden')) + t.ok(container.hasAttribute('hidden'), 'container is hidden') }) diff --git a/popover/index.js b/popover/index.js index 3d867a0b..bc61a432 100644 --- a/popover/index.js +++ b/popover/index.js @@ -112,13 +112,17 @@ export class TonicPopover extends Tonic { } } - show (triggerNode) { + show () { + const triggerNode = document.querySelector(`#${this.props.for}`) const popover = this.querySelector('.tonic--popover') let scrollableArea = triggerNode.parentNode while (true) { if (!scrollableArea || scrollableArea.tagName === 'BODY') break - if (window.getComputedStyle(scrollableArea).overflow === 'scroll') break + + const overflow = window.getComputedStyle(scrollableArea).overflow + if (['scroll', 'scroll-x', 'scroll-y', 'auto'].includes(overflow)) break + scrollableArea = scrollableArea.parentNode } @@ -147,7 +151,7 @@ export class TonicPopover extends Tonic { left += triggerNode.offsetWidth - popover.offsetWidth break case 'bottom': - pos += triggerNode.offsetHeight + margin + pos += triggerNode.parentNodeNode.offsetHeight + margin left += (triggerNode.offsetWidth / 2) - (popover.offsetWidth / 2) break } @@ -155,11 +159,9 @@ export class TonicPopover extends Tonic { popover.style.top = `${pos}px` popover.style.left = `${left}px` - window.requestAnimationFrame(() => { - popover.className = `tonic--popover tonic--show tonic--popover--${this.props.position}` - const event = new window.Event('show') - this.dispatchEvent(event) - }) + popover.className = `tonic--popover tonic--show tonic--popover--${this.props.position}` + const event = new window.Event('show') + this.dispatchEvent(event) } hide () { diff --git a/popover/test.js b/popover/test.js index b1463c60..e064245b 100644 --- a/popover/test.js +++ b/popover/test.js @@ -1,8 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' -import { html } from '../_test/util' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' + import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) @@ -13,9 +13,9 @@ document.body.appendChild(html`
Default Popover - +
`) -// -// Panel Default -// -const popover = document.getElementById('tonic-popover-default') -popover.addEventListener('show', event => { - document.body.addEventListener('click', e => { - popover.hide() - }, { once: true }) -}) - -// TODO: write tests for popover. test('opening popover', async t => { const container = qs('#popover') const popover = qs('#tonic-popover-default', container) @@ -49,20 +38,24 @@ test('opening popover', async t => { t.ok(popover) t.ok(button) - const popoverCont = qs('.tonic--popover', popover) - t.ok(popoverCont) + const coPopover = qs('.tonic--popover', popover) + t.ok(coPopover) - const divs = popoverCont.querySelectorAll('div') + popover.addEventListener('show', event => { + t.ok(coPopover.classList.contains('tonic--show'), 'the component should be visible') + popover.hide() + }) + + const divs = coPopover.querySelectorAll('div') t.equal(divs.length, 3) - const styles = window.getComputedStyle(divs[0]) - t.equal(styles.visibility, 'hidden') + t.ok(!coPopover.classList.contains('tonic--show'), 'the component should be hidden') - button.querySelector('button').click() await sleep(512) + button.click() - const styles2 = window.getComputedStyle(divs[0]) - t.equal(styles2.visibility, 'visible') + await sleep(512) + t.ok(!coPopover.classList.contains('tonic--show'), 'the component should not be visible') }) function sleep (ms) { diff --git a/profile-image/test.js b/profile-image/test.js index f4ebb169..de900498 100644 --- a/profile-image/test.js +++ b/profile-image/test.js @@ -1,8 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' -import { html } from '../_test/util' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' + import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/progress-bar/test.js b/progress-bar/test.js index 62cfa092..5964202f 100644 --- a/progress-bar/test.js +++ b/progress-bar/test.js @@ -1,8 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' -import { html } from '../_test/util' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' + import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/range/test.js b/range/test.js index 86f6f309..63fc7e1f 100644 --- a/range/test.js +++ b/range/test.js @@ -1,8 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' -import { html } from '../_test/util' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' + import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/relative-time/test.js b/relative-time/test.js index 9ffd7161..9dfef28f 100644 --- a/relative-time/test.js +++ b/relative-time/test.js @@ -1,10 +1,10 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' -import { Components } from '..' -import { RelativeTime } from '.' +import { Components } from '../index.js' +import { RelativeTime } from './index.js' import { Tonic } from '@socketsupply/tonic' + Components(Tonic) const NOW_MINUS_5 = new Date() diff --git a/router/test.js b/router/test.js index 7a851e30..731930fb 100644 --- a/router/test.js +++ b/router/test.js @@ -1,6 +1,7 @@ -import { html } from '../_test/util' +import { html } from '../_test/util.js' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' + +import { Components } from '../index.js' Components(Tonic) diff --git a/select/test.js b/select/test.js index 1ace0280..e4d445b5 100644 --- a/select/test.js +++ b/select/test.js @@ -1,8 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' -import { html } from '../_test/util' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' + import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/socket.ini b/socket.ini new file mode 100644 index 00000000..44f11e5f --- /dev/null +++ b/socket.ini @@ -0,0 +1,507 @@ + +; ___ __ ___ __ ____ +; /__ / / / /_/ /_ / +; __/ /__/ /__ / \ /__ / +; +; Socket ⚡︎ Runtime · A modern runtime for Web Apps · v0.5.4 (f8db1eaf) +; +; Note that "~" alias won't expand to the home directory in any of the config +; files. Use the full path instead. + +; +; Build +; --- +; +[build] + +; ssc will copy everything in this directory to the build output directory. +; This is useful when you want to avoid bundling or want to use tools like +; vite, webpack, rollup, etc. to build your project and then copy output to +; the Socket bundle resources directory. +; default value: "src" +; copy = "src" + +; An ini file that maps files from the source directory to the build directory. +; copy_map = src/mapping.ini + +; An list of environment variables, separated by commas. +env = USER, TMPDIR, PWD + +; Advanced Compiler Settings (ie C++ compiler -02, -03, etc). +flags = -O3 + +; If true, the window will never be displayed. +; default value: false +headless = true + +; The name of the program and executable to be output. Can't contain spaces or special characters. Required field. +name = "components" + +; The binary output path. It's recommended to add this path to .gitignore. +; default value: "build" +output = ".build" + +; The build script. It runs before the `[build] copy` phase. +; script = "npm run build" + + +[build.script] + +; If true, it will pass build arguments to the build script. WARNING: this could be deprecated in the future. +; default value: false +forward_arguments = false + + +[build.watch] + +; Configure your project to watch for sources that could change when running `ssc`. +; Could be a string or an array of strings +sources[] = "src" + +[build.copy-map] + +importmap.json = importmap.json +node_modules = node_modules + +_test/index.js = _test/index.js +_test/util.js = _test/util.js +_test/index.html = index.html + +index.js = index.js + +accordion = accordion +badge = badge +button = button +chart = chart +checkbox = checkbox +dialog = dialog +form = form +icon = icon +input = input +loader = loader +panel = panel +popover = popover +profile-image = profile-image +progress-bar = progress-bar +range = range +relative-time = relative-time +router = router +select = select +split = split +sprite = sprite +tabs = tabs +textarea = textarea +toaster = toaster +toaster-inline = toaster-inline +toggle = toggle +tooltip = tooltip +windowed = windowed + +; +; Webview +; --- +; +[webview] + +; Make root open index.html +; default value: "/" +root = "/" + +; Set default 'index.html' path to open for implicit routes +; default value: "" +; default_index = "" + +; Tell the webview to watch for changes in its resources +; default value: false +watch = true + +; Custom headers injected on all webview routes +; default value: "" +; headers[] = "X-Custom-Header: Some-Value" + +importmap = "/importmap.json" + + +[webview.watch] +; Configure webview to reload when a file changes +; default value: true +reload = true + +; Timeout in milliseconds to wait for service worker to reload before reloading webview +; default value: 500 +service_worker_reload_timeout = 500 + +; Mount file system paths in webview navigator +[webview.navigator.mounts] + +; $HOST_HOME/directory-in-home-folder/ = /mount/path/in/navigator +; $HOST_CONTAINER/directory-app-container/ = /mount/path/in/navigator +; $HOST_PROCESS_WORKING_DIRECTORY/directory-in-app-process-working-directory/ = /mount/path/in/navigator + +; Specify allowed navigator navigation policy patterns +[webview.navigator.policies] +; allowed[] = "https://*.example.com/*" + +; +; Permissions +; --- +; +[permissions] + +; Allow/Disallow fullscreen in application +; default value: true +; allow_fullscreen = true + +; Allow/Disallow microphone in application +; default value: true +; allow_microphone = true + +; Allow/Disallow camera in application +; default value: true +; allow_camera = true + +; Allow/Disallow user media (microphone + camera) in application +; default value: true +; allow_user_media = true + +; Allow/Disallow geolocation in application +; default value: true +; allow_geolocation = true + +; Allow/Disallow notifications in application +; default value: true +; allow_notifications = true + +; Allow/Disallow sensors in application +; default value: true +; allow_sensors = true + +; Allow/Disallow clipboard in application +; default value: true +; allow_clipboard = true + +; Allow/Disallow bluetooth in application +; default value: true +; allow_bluetooth = true + +; Allow/Disallow data access in application +; default value: true +; allow_data_access = true + +; Allow/Disallow AirPlay access in application (macOS/iOS) only +; default value: true +; allow_airplay = true + +; Allow/Disallow HotKey binding registration (desktop only) +; default value: true +; allow_hotkeys = true + +; +; Debug +; --- +; +[debug] + +; Advanced Compiler Settings for debug purposes (ie C++ compiler -g, etc). +flags = "-g" + +; +; Meta +; --- +; +[meta] + +; A unique ID that identifies the bundle (used by all app stores). +; It's required when `[meta] type` is not `"extension"`. +; It should be in a reverse DNS notation https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundleidentifier#discussion +bundle_identifier = "com.components" + +; A unique application protocol scheme to support deep linking +; If this value is not defined, then it is derived from the `[meta] bundle_identifier` value +application_protocol = "components" + +; A string that gets used in the about dialog and package meta info. +; copyright = "(c) Beep Boop Corp. 1985" + +; A short description of the app. +; description = "A UI for the beep boop network" + +; Set the limit of files that can be opened by your process. +file_limit = 1024 + +; Localization +lang = "en-us" + +; A String used in the about dialog and meta info. +; maintainer = "Beep Boop Corp." + +; The title of the app used in metadata files. This is NOT a window title. Can contain spaces and special characters. Defaults to name in a [build] section. +title = "components" + +; Builds an extension when set to "extension". +; default value: "" +; type = "" + +; A string that indicates the version of the application. It should be a semver triple like 1.2.3. Defaults to 1.0.0. +version = 1.0.0 + +; +; Android +; --- +; +[android] + +; Extensions of files that will not be stored compressed in the APK. +aapt_no_compress = "" + +; Enables gradle based ndk build rather than using external native build (standard ndk is the old slow way) +enable_standard_ndk_build = false + +; Name of the MainActivity class. Could be overwritten by custom native code. +main_activity = "" + +; Which permissions does your application need: https://developer.android.com/guide/topics/permissions/overview +manifest_permissions = "" + +; To restrict the set of ABIs that your application supports, set them here. +native_abis = "" + +; Used for adding custom source files and related compiler attributes. +native_cflags = "" +native_sources = "" +native_makefile = "" +sources = "" + +; The icon to use for identifying your app on Android. +icon = "src/icon.png" + +; The various sizes and scales of the icons to create, required minimum are listed by default. +icon_sizes = "512@1x" + +; +; iOS +; --- +; +[ios] + +; signing guide: https://socketsupply.co/guides/#ios-1 +codesign_identity = "" + +; Describes how Xcode should export the archive. Available options: app-store, package, release-testing, enterprise, development, and developer-id. +distribution_method = "release-testing" + +; A path to the provisioning profile used for signing iOS app. +provisioning_profile = "" + +; which device to target when building for the simulator. +simulator_device = "iPhone 14" + +; Indicate to Apple if you are using encryption that is not exempt. +; default value: false +; nonexempt_encryption = false + +; The icon to use for identifying your app on iOS. +icon = "src/icon.png" + +; The various sizes and scales of the icons to create, required minimum are listed by default. +icon_sizes = "29@1x 29@2x 29@3x 40@2x 40@3x 57@1x 57@2x 60@2x 60@3x" + +; +; Linux +; --- +; +[linux] + +; Helps to make your app searchable in Linux desktop environments. +categories = "Developer Tools" + +; The command to execute to spawn the "back-end" process. +; cmd = "node backend/index.js" + +; The icon to use for identifying your app in Linux desktop environments. +icon = "src/icon.png" + +; The various sizes and scales of the icons to create, required minimum are listed by default. +icon_sizes = "512@1x" + + +; +; MacOS +; --- +; +[mac] + +; A category in the App Store +category = "" + +; The command to execute to spawn the "back-end" process. +; cmd = "node backend/index.js" + +; TODO Signing guide: https://socketsupply.co/guides/#code-signing-certificates +codesign_identity = "" + +; Additional paths to codesign +codesign_paths = "" + +; Minimum supported MacOS version +; default value: "13.0.0" +; minimum_supported_version = "13.0.0" + +; If titlebar_style is "hiddenInset", this will determine the x and y offsets of the window controls (traffic lights). +; window_control_offsets = "10x24" + +; The icon to use for identifying your app on MacOS. +icon = "src/icon.png" + +; The various sizes and scales of the icons to create, required minimum are listed by default. +icon_sizes = "16@1x 32@1x 128@1x" + +; +; Native Extensions +; --- +; +[native] + +; Files that should be added to the compile step. +files = native-module1.cc native-module2.cc + +; Extra Headers +headers = native-module1.hh + + +; +; MS Windows +; --- +; +[win] + +; The command to execute to spawn the “back-end” process. +; cmd = "node backend/index.js" + +; The icon to use for identifying your app on Windows, relative to copied path resources +logo = "icon.ico" + +; A relative path to the pfx file used for signing. +; pfx = "certs/cert.pfx" + +; The signing information needed by the appx api. +; publisher = "CN=Beep Boop Corp., O=Beep Boop Corp., L=San Francisco, S=California, C=US" + +; The icon to use for identifying your app on Windows. +icon = "src/icon.ico" + +; The various sizes and scales of the icons to create, required minimum are listed by default. +icon_sizes = "512@1x" + +; +; Application Window +; --- +; +[window] + +; The initial height of the first window in pixels or as a percentage of the screen. +height = 50% + +; The initial width of the first window in pixels or as a percentage of the screen. +width = 50% + +; The initial color of the window in dark mode. If not provided, matches the current theme. +; default value: "" +; backgroundColorDark = "rgba(0, 0, 0, 1)" + +; The initial color of the window in light mode. If not provided, matches the current theme. +; default value: "" +; backgroundColorLight = "rgba(255, 255, 255, 1)" + +; Determine if the titlebar style (hidden, hiddenInset) +; default value: "" +; titlebar_style = "hiddenInset" + +; Maximum height of the window in pixels or as a percentage of the screen. +; default value: 100% +; max_height = 100% + +; Maximum width of the window in pixels or as a percentage of the screen. +; default value: 100% +; max_width = 100% + +; Minimum height of the window in pixels or as a percentage of the screen. +; default value: 0 +; min_height = 0 + +; Minimum width of the window in pixels or as a percentage of the screen. +; default value: 0 +; min_width = 0 + +; Determines if the window has a title bar and border. +; default value: false +; frameless = false + +; Determines if the window is resizable. +; default value: true +; resizable = true + +; Determines if the window is maximizable. +; default value: true +; maximizable = true + +; Determines if the window is minimizable. +; default value: true +; minimizable = true + +; Determines if the window is closable. +; default value: true +; closable = true + +; Determines the window is utility window. +; default value: false +; utility = false + +[window.alert] + +; The title that appears in the 'alert', 'prompt', and 'confirm' dialogs. If this value is not present, then the application title is used instead. Currently only supported on iOS/macOS. +; defalut value = "" +; title = "" + + +[application] + +; If agent is set to true, the app will not display in the tab/window switcher or dock/task-bar etc. Useful if you are building a tray-only app. +; default value: false +; agent = true + + +[tray] + +; The icon to be displayed in the operating system tray. On Windows, you may need to use ICO format. +; defalut value = "" +; icon = "src/icon.png" + + +[headless] + +; The headless runner command. It is used when no OS specific runner is set. +runner = "" +; The headless runner command flags. It is used when no OS specific runner is set. +runner_flags = "" +; The headless runner command for Android +runner_android = "" +; The headless runner command flags for Android +runner_android_flags = "" +; The headless runner command for iOS +runner_ios = "" +; The headless runner command flags for iOS +runner_ios_flags = "" +; The headless runner command for Linux +runner_linux = "" +; The headless runner command flags for Linux +runner_linux_flags = "" +; The headless runner command for MacOS +runner_mac = "" +; The headless runner command flags for MacOS +runner_mac_flags = "" +; The headless runner command for Windows +runner_win32 = "" +; The headless runner command flags for Windows +runner_win32_flags = "" + diff --git a/sprite/test.js b/sprite/test.js index d63a0515..bdcf0a78 100644 --- a/sprite/test.js +++ b/sprite/test.js @@ -1,8 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' -import { html } from '../_test/util' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' + import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) @@ -30,8 +30,8 @@ test('test an icon', t => { t.ok(svg.querySelector('use')) const size = use.getBoundingClientRect() - t.equal(Math.floor(size.height), 92) - t.equal(Math.floor(size.width), 92) + t.equal(Math.floor(size.height), 90) + t.equal(Math.floor(size.width), 90) const sprite = qs('tonic-sprite') t.ok(sprite) diff --git a/tabs/test.js b/tabs/test.js index 99f0c86e..db8a1952 100644 --- a/tabs/test.js +++ b/tabs/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/textarea/test.js b/textarea/test.js index e3cfc18b..af1b21ab 100644 --- a/textarea/test.js +++ b/textarea/test.js @@ -1,6 +1,7 @@ -import { html } from '../_test/util' +import { html } from '../_test/util.js' + import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/toaster-inline/test.js b/toaster-inline/test.js index fd2dd66d..b362e78b 100644 --- a/toaster-inline/test.js +++ b/toaster-inline/test.js @@ -1,7 +1,6 @@ - -import { html } from '../_test/util' +import { html } from '../_test/util.js' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/toaster/index.js b/toaster/index.js index 0d3a56ef..325934c2 100644 --- a/toaster/index.js +++ b/toaster/index.js @@ -248,7 +248,11 @@ export class TonicToaster extends Tonic { destroy (el) { el.classList.remove('tonic--show') + const timeout = setTimeout(() => { + el.parentNode.removeChild(el) + }, 128) el.addEventListener('transitionend', e => { + clearTimeout(timeout) if (el && el.parentNode) { el.parentNode.removeChild(el) } diff --git a/toaster/test.js b/toaster/test.js index fcdfadba..c5af3a95 100644 --- a/toaster/test.js +++ b/toaster/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/toggle/test.js b/toggle/test.js index 3010aa82..e2c614ce 100644 --- a/toggle/test.js +++ b/toggle/test.js @@ -1,9 +1,8 @@ -import { test } from 'tapzero' -import { qs } from 'qsa-min' +import { test } from 'socket:test' +import { html, qs } from '../_test/util.js' -import { html } from '../_test/util' import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/tooltip/test.js b/tooltip/test.js index 63dfc0d0..48bec320 100644 --- a/tooltip/test.js +++ b/tooltip/test.js @@ -1,6 +1,7 @@ -import { html } from '../_test/util' +import { html } from '../_test/util.js' + import { Tonic } from '@socketsupply/tonic' -import { Components } from '..' +import { Components } from '../index.js' Components(Tonic) diff --git a/windowed/test.js b/windowed/test.js index f0ffda09..d2c6da0e 100644 --- a/windowed/test.js +++ b/windowed/test.js @@ -1,4 +1,4 @@ -import { html } from '../_test/util' +import { html } from '../_test/util.js' document.body.appendChild(html`