diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 1a1f30185..000000000 --- a/.babelrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-typescript" - ], - "plugins": [ - "@babel/plugin-transform-class-properties", - "@babel/plugin-transform-optional-chaining", - "@babel/plugin-transform-async-to-generator", - "@babel/plugin-transform-runtime" - ] -} diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4bdb45c39..a6909c71c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -17,7 +17,6 @@ jobs: strategy: matrix: node-version: - - 18.x - 20.x - 22.x steps: @@ -75,7 +74,7 @@ jobs: - uses: actions/setup-node@v5 with: node-version: 20.x - - uses: rlespinasse/github-slug-action@v3.x + - uses: rlespinasse/github-slug-action@v4.x - name: Append commit hash to package version run: 'sed -i -E "s/(\"version\": *\"[^\"]+)/\1-${GITHUB_SHA_SHORT}/" package.json' - name: Disable pre- and post-publish actions diff --git a/.gitignore b/.gitignore index 626aa18c5..f6815e3ba 100644 --- a/.gitignore +++ b/.gitignore @@ -5,7 +5,7 @@ src/versionInfo.ts .idea .vscode coverage -Documentation/api +docs/api examples/storybook .history/ -Documentation/form-examples/main.js +docs/form-examples/solid-ui.js diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 2ac7451cc..000000000 --- a/.npmignore +++ /dev/null @@ -1,4 +0,0 @@ -# This file primarily exists to prevent ./dist from being ignored when publishing. -# (Because it's listed in .gitignore). - -coverage \ No newline at end of file diff --git a/LICENSE.md b/LICENSE.md index 9eefe8021..307ecf861 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,4 +1,6 @@ -Copyright 2019 - present +MIT License + +Copyright (c) 2019 Solid Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. diff --git a/README.md b/README.md index d703017a6..145037015 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,8 @@ These are HTML5 widgets which connect to a solid store. Building blocks for soli Vanilla JS. Includes large widgets like chat, table, matrix, form fields, and small widgets. See [Solid-Ui Storybook](http://solidos.github.io/solid-ui/examples/storybook/) for SolidUI widgets. -See [Solid-UI API](https://solidos.github.io/solid-ui/Documentation/api/) for SolidUI functions. -See [Forms introduction](./Documentation/FormsReadme.md) for UI vocabulary implementation. +See [Solid-UI API](https://solidos.github.io/solid-ui/docs/api/) for SolidUI functions. +See [Forms introduction](./docs/FormsReadme.md) for UI vocabulary implementation. Table of content: - Getting started(#getting-started) @@ -21,38 +21,87 @@ Table of content: Contributions of bug fixes and new functionality, documentation, and tests are always appreciated. -### In npm-based projects -When including solid-ui in an npm-based project, you can use it with: +## Install via npm + +```sh +npm install solid-ui +``` ```js - import { ns, rdf, acl, aclControl, create, dom, icons, log, matrix, media, - messageArea, infiniteMessageArea, pad, preferences, style, table, tabs, utils, widgets, versionInfo -} from 'solid-ui' + import * as UI from 'solid-ui' +``` +## Use directly in a browser + +There are a few differences to mention: +* the UMD bundles come in 2 flavours, with rdflib bundled together and without; +* the ESM bundles do not contain rdflib, so it must be imported separately. + +## Files +- For browser UMD, bundled with rdflib: `dist/solid-ui.js` (global `window.UI`) +- For browser UMD, without rdflib: `dist/solid-ui.external.js` (global `window.UI`) +- For browser ESM, without rdflib: `dist/solid-ui.esm.external.js` (import as module) +- UMD bundles come in chunked files +- both version also containe minified versions. + + +### UMD bundle (global variable) + +```html + + + + + + + + + + + ``` -### Directly in a webpage -Clone this repo, and in the repo root run: -* `npm install` -* `npm run build` -This will generate a `dist/` folder containing, among other artifacts, `dist/main.js`. -Now run `npx serve` and go to http://localhost:3000/Documentation/ with your browser to see some examples. +### ESM bundle (import as module) -While viewing one of those examples, you can open the web console in your browser and for instance -try how you can create a button: -```js -const solidLogo = 'https://solidproject.org/assets/img/solid-emblem.svg' -const myButton = UI.widgets.button(document, solidLogo, 'test', () => window.alert('clicked!')) -UI.widgets.clearElement(document.body) -document.body.appendChild(myButton) +```html + ``` -Or a chat widget: -```js -const chatChannel = 'https://example-user.inrupt.net/public/example-chat/index.ttl#this' -const chat = UI.infiniteMessageArea(document, store, UI.rdf.namedNode(chatChannel)) -document.body.appendChild(chat) +or + +### ESM bundle with import map (bare specifiers) + +```html + + ``` ### Development new components diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 000000000..177b30730 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,9 @@ +export default { + presets: [ + ['@babel/preset-env', { targets: { node: 'current' } }], + '@babel/preset-typescript', + ], + plugins: [ + '@babel/plugin-transform-runtime' + ] +} diff --git a/Documentation/FormsReadme.md b/docs/FormsReadme.md similarity index 62% rename from Documentation/FormsReadme.md rename to docs/FormsReadme.md index 2ce0698a8..15275bac0 100644 --- a/Documentation/FormsReadme.md +++ b/docs/FormsReadme.md @@ -30,36 +30,36 @@ In the [form-playground](https://solidos.github.io/form-playground/playground.ht To make use of Forms, you need to use solid-ui. Head over to the [solid-ui readme](https://github.com/SolidOS/solid-ui/blob/main/README.md#getting-started) for some how-to guides on how to use it in `npm` or as a `html - + + diff --git a/test/browser/tabs/test-tabs.js b/test/browser/tabs/test-tabs.js index dbd0045fe..f3c2c62bc 100644 --- a/test/browser/tabs/test-tabs.js +++ b/test/browser/tabs/test-tabs.js @@ -1,4 +1,3 @@ -/* global $rdf UI debug */ if (!window.UI) { window.alert('Please run "npm install && npm run build" in your repo root first.') } @@ -69,7 +68,7 @@ document.addEventListener('DOMContentLoaded', function () { container.innerHTML = '' if (tabContentCache[subject.uri]) { container.appendChild(tabContentCache[subject.uri]) - debug.log(' used cached copy for ' + subject.uri) + console.log(' used cached copy for ' + subject.uri) return } const iframe = container.appendChild(dom.createElement('iframe')) diff --git a/test/custom-matchers/toContainGraph.ts b/test/custom-matchers/toContainGraph.ts index e1a031db9..7b3bc7823 100644 --- a/test/custom-matchers/toContainGraph.ts +++ b/test/custom-matchers/toContainGraph.ts @@ -13,11 +13,3 @@ The following ${diffStatements.length} statements does not exist in the above gr ${diffStatements.map(st => `- ${st.subject} ${st.predicate} ${st.object} ${st.graph} .\n`).join('')}` } } - -declare global { - namespace jest { - interface Matchers { - toContainGraph (a: IndexedFormula): R; - } - } -} diff --git a/test/custom-matchers/toEqualGraph.ts b/test/custom-matchers/toEqualGraph.ts index 834783846..f511d0b18 100644 --- a/test/custom-matchers/toEqualGraph.ts +++ b/test/custom-matchers/toEqualGraph.ts @@ -34,11 +34,3 @@ The following ${recDiffExpStatements.length} statements does not exist in the ab ${recDiffExpStatements.map(st => `- ${st.subject} ${st.predicate} ${st.object} ${st.graph} .\n`).join('')}` } } - -declare global { - namespace jest { - interface Matchers { - toEqualGraph (a: IndexedFormula): R; - } - } -} diff --git a/test/helpers/setup.ts b/test/helpers/setup.ts index ea235c930..69c942cbf 100644 --- a/test/helpers/setup.ts +++ b/test/helpers/setup.ts @@ -4,11 +4,11 @@ import 'isomorphic-fetch' import { TextEncoder, TextDecoder } from 'util' // https://stackoverflow.com/questions/52612122/how-to-use-jest-to-test-functions-using-crypto-or-window-mscrypto -// globalThis.crypto = require('crypto').webcrypto // with node >=16 -const nodeCrypto = require('crypto') + +import crypto from 'crypto' global.crypto = { getRandomValues: function (buffer) { - return nodeCrypto.randomFillSync(buffer) + return crypto.randomFillSync(buffer) } } diff --git a/test/unit/README.md b/test/unit/README.md index f27d05649..afa762e49 100644 --- a/test/unit/README.md +++ b/test/unit/README.md @@ -16,7 +16,7 @@ There are a lot of tests in `solid-ui`, so you will most likely want to run only ### Coverage Run the following command: -`npm run coverage` +`npm run test:coverage` The results will be found in `coverage/lcov-report/index.html`. If you are using VSCode, you can right click and select `Open in Browser Preview`. Alternatively, you can type the path in your browser; for instance, the following: ``` diff --git a/test/unit/acl/acl.mocks.ts b/test/unit/acl/acl.mocks.ts index 834d959c9..26f2dcd26 100644 --- a/test/unit/acl/acl.mocks.ts +++ b/test/unit/acl/acl.mocks.ts @@ -1,5 +1,5 @@ import { sym } from 'rdflib' -import * as ns from '../../../src/ns' +import ns from '../../../src/ns' import { getFileContent } from '../helpers/getFileContent' import { resolve } from 'path' diff --git a/test/unit/acl/styles.test.ts b/test/unit/acl/styles.test.ts index d4babe4b3..4243e6ec5 100644 --- a/test/unit/acl/styles.test.ts +++ b/test/unit/acl/styles.test.ts @@ -1,10 +1,10 @@ import { silenceDebugMessages } from '../helpers/debugger' -import * as Style from '../../../src/style' +import { style } from '../../../src/style' silenceDebugMessages() describe('Style', () => { it('exists', () => { - expect(typeof Style).toEqual('object') + expect(typeof style).toEqual('object') }) }) diff --git a/test/unit/chat/message.test.ts b/test/unit/chat/message.test.ts index bff858986..2171e3738 100644 --- a/test/unit/chat/message.test.ts +++ b/test/unit/chat/message.test.ts @@ -6,8 +6,6 @@ import { renderMessageRow } from '../../../src/chat/message' import { store } from 'solid-logic' -// import { originalVersion } from '../../../src/chat/chatLogic' -import * as widgets from '../../../src/widgets' const bindings = { '?creator': { diff --git a/test/unit/chat/signature.test.ts b/test/unit/chat/signature.test.ts index 0019f440a..49072880e 100644 --- a/test/unit/chat/signature.test.ts +++ b/test/unit/chat/signature.test.ts @@ -1,5 +1,4 @@ -import { getMsgHash, serializeMsg, signMsg, verifySignature } from '../../../src/chat/signature' -import { sha256 } from '@noble/hashes/sha256' +import { serializeMsg, signMsg, verifySignature } from '../../../src/chat/signature' const PRIV_KEY = 'a11bc5d2eee6cdb3b37f5473a712cad905ccfb13fb2ccdbf1be0a1ac4fdc7d2a' const PUB_KEY = '023a9da707bee1302f66083c9d95673ff969b41607a66f52686fa774d64ceb87' diff --git a/test/unit/header/index.test.ts b/test/unit/header/index.test.ts index 795d2be4d..b8c547ce8 100644 --- a/test/unit/header/index.test.ts +++ b/test/unit/header/index.test.ts @@ -96,8 +96,6 @@ describe('createBanner', () => { // getProfileImg, need to mock widgets.findImage(user) describe('getProfileImg', () => { it.skip('returns an empty image', () => { - // eslint-disable-next-line no-undef - // eslint-disable-next-line no-undef const findImageSpy = jest.spyOn(widgets, 'findImage').mockImplementation(() => { return 'test' }) const user = new NamedNode('http://test.com') expect(getProfileImg(store, user)).toMatchSnapshot() diff --git a/test/unit/helpers/debugger.ts b/test/unit/helpers/debugger.ts index ef08206f3..c7523bf68 100644 --- a/test/unit/helpers/debugger.ts +++ b/test/unit/helpers/debugger.ts @@ -1,10 +1,10 @@ // We don't want to output debug messages to console as part of the tests -jest.mock('../../../src/debug') import * as debug from '../../../src/debug' +jest.mock('../../../src/debug') export function silenceDebugMessages () { jest.spyOn(debug, 'log').mockImplementation(() => {}) jest.spyOn(debug, 'warn').mockImplementation(() => {}) jest.spyOn(debug, 'error').mockImplementation(() => {}) jest.spyOn(debug, 'trace').mockImplementation(() => {}) -} \ No newline at end of file +} diff --git a/test/unit/index.test.ts b/test/unit/index.test.ts index 2528e9e90..1912bc87d 100644 --- a/test/unit/index.test.ts +++ b/test/unit/index.test.ts @@ -32,7 +32,6 @@ describe('Index', () => { 'table', 'tabs', 'utils', - 'versionInfo', 'widgets' ]) }) diff --git a/test/unit/log.test.ts b/test/unit/log.test.ts index c4363b0b9..9ca40fdba 100644 --- a/test/unit/log.test.ts +++ b/test/unit/log.test.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { silenceDebugMessages } from './helpers/debugger' import * as api from '../../src/index' import * as log from '../../src/log' diff --git a/test/unit/ns.test.ts b/test/unit/ns.test.ts index 257af17a8..64f13fb43 100644 --- a/test/unit/ns.test.ts +++ b/test/unit/ns.test.ts @@ -1,10 +1,10 @@ import { silenceDebugMessages } from './helpers/debugger' -import { rdf } from '../../src/ns' +import ns from '../../src/ns' silenceDebugMessages() describe('RDF Namespace', () => { it('gives the right URI for rdf:type', () => { - expect(rdf('type').uri).toEqual('http://www.w3.org/1999/02/22-rdf-syntax-ns#type') + expect(ns.rdf('type').uri).toEqual('http://www.w3.org/1999/02/22-rdf-syntax-ns#type') }) }) diff --git a/test/unit/style.test.ts b/test/unit/style.test.ts index dce9f57da..a7c2b35a9 100644 --- a/test/unit/style.test.ts +++ b/test/unit/style.test.ts @@ -1,61 +1,51 @@ import { silenceDebugMessages } from './helpers/debugger' -import { - buttonStyle, - classIconStyle, - formTextInput, - iconStyle, - messageBodyStyle, - multilineTextInputStyle, - pendingeditModifier, - signInAndUpButtonStyle, - textInputStyle -} from '../../src/style' +import { style } from '../../src/style' silenceDebugMessages() describe('textInputStyle', () => { it('exists', () => { - expect(typeof textInputStyle).toEqual('string') + expect(typeof style.textInputStyle).toEqual('string') }) }) describe('buttonStyle', () => { it('exists', () => { - expect(typeof buttonStyle).toEqual('string') + expect(typeof style.buttonStyle).toEqual('string') }) }) describe('iconStyle', () => { it('exists', () => { - expect(typeof iconStyle).toEqual('string') + expect(typeof style.iconStyle).toEqual('string') }) }) describe('classIconStyle', () => { it('exists', () => { - expect(typeof classIconStyle).toEqual('string') + expect(typeof style.classIconStyle).toEqual('string') }) }) describe('messageBodyStyle', () => { it('exists', () => { - expect(typeof messageBodyStyle).toEqual('string') + expect(typeof style.messageBodyStyle).toEqual('string') }) }) describe('pendingeditModifier', () => { it('exists', () => { - expect(typeof pendingeditModifier).toEqual('string') + expect(typeof style.pendingeditModifier).toEqual('string') }) }) describe('signInButtonStyle', () => { it('exists', () => { - expect(typeof signInAndUpButtonStyle).toEqual('string') + expect(typeof style.signInAndUpButtonStyle).toEqual('string') }) }) describe('formTextInput', () => { it('exists', () => { - expect(typeof formTextInput).toEqual('string') + expect(typeof style.formTextInput).toEqual('string') }) }) describe('multilineTextInputStyle', () => { it('exists', () => { - expect(typeof multilineTextInputStyle).toEqual('string') + expect(typeof style.multilineTextInputStyle).toEqual('string') }) }) diff --git a/test/unit/table.test.ts b/test/unit/table.test.ts index efc5cdada..af37d725f 100644 --- a/test/unit/table.test.ts +++ b/test/unit/table.test.ts @@ -22,10 +22,10 @@ const query = new Query('List people') const vars = ['person', 'name', 'age', 'hobby'] export interface Person { - person: NamedNode, - name: string, - age: number, - hobby: string + person: NamedNode, + name: string, + age: number, + hobby: string } const v = {} // The RDF variable objects for each variable name @@ -54,13 +54,13 @@ describe('renderTableViewPane', () => { }) it('calls onDone', async () => { const onDone = jest.fn() // mock function - const _ = renderTableViewPane(document, { query, onDone }).innerHTML + renderTableViewPane(document, { query, onDone }) await new Promise(resolve => setTimeout(resolve, 1000)) expect(onDone).toHaveBeenCalled() }) it('includes the data', async () => { let result = null - const _ = renderTableViewPane(document, { query, onDone }) + renderTableViewPane(document, { query, onDone }) function onDone (ele) { result = ele.innerHTML @@ -74,7 +74,7 @@ describe('renderTableViewPane', () => { }) it('includes the data', async () => { let result = null - const _ = renderTableViewPane(document, { query, onDone }) + renderTableViewPane(document, { query, onDone }) function onDone (ele) { result = ele.innerHTML @@ -97,7 +97,7 @@ describe('renderTableViewPane', () => { it('orders by reverse age', async () => { const options = { query, onDone, sortBy: '?age', sortReverse: true } let result = null - const _ = renderTableViewPane(document, options) + renderTableViewPane(document, options) function onDone (ele) { result = ele.innerHTML } @@ -108,7 +108,7 @@ describe('renderTableViewPane', () => { it('orders by name', async () => { const options = { query, onDone, sortBy: '?name', sortReverse: false } let result = null - const _ = renderTableViewPane(document, options) + renderTableViewPane(document, options) function onDone (ele) { result = ele.innerHTML } @@ -120,7 +120,7 @@ describe('renderTableViewPane', () => { it('orders by hobby', async () => { const options = { query, onDone, sortBy: '?hobby', sortReverse: false } let result = null - const _ = renderTableViewPane(document, options) + renderTableViewPane(document, options) function onDone (ele) { result = ele.innerHTML } @@ -141,7 +141,7 @@ describe('renderTableViewPane', () => { } } let result = null - const _ = renderTableViewPane(document, options) + renderTableViewPane(document, options) function onDone (ele) { result = ele.innerHTML } diff --git a/test/unit/tabs.test.ts b/test/unit/tabs.test.ts index 8c5559329..a30a350dd 100644 --- a/test/unit/tabs.test.ts +++ b/test/unit/tabs.test.ts @@ -8,7 +8,7 @@ import { label } from '../../src/utils' import { solidLogicSingleton } from 'solid-logic' // @ts-ignore -import { meeting, rdfs } from '../../src/ns' +import ns from '../../src/ns' const store = solidLogicSingleton.store @@ -36,9 +36,9 @@ describe('tabWidget', () => { describe('minimal setup of options', () => { beforeAll(() => { - const predicate = meeting('toolList') + const predicate = ns.meeting('toolList') store.add(subject, predicate, new Collection([item1, item2]), subject.doc()) - store.add(item1, rdfs('label'), lit('Item 1'), subject.doc()) + store.add(item1, ns.rdfs('label'), lit('Item 1'), subject.doc()) tabWidgetElement = tabs.tabWidget({ dom, @@ -155,7 +155,7 @@ describe('tabWidget', () => { afterAll(clearStore) it('allows for tabs to be fetched from triples instead of a collection', () => { - const predicate = meeting('toolList') + const predicate = ns.meeting('toolList') store.add(subject, predicate, item1, subject.doc()) store.add(subject, predicate, item2, subject.doc()) store.add(subject, predicate, item3, subject.doc()) @@ -238,7 +238,7 @@ describe('tabWidget', () => { tabWidgetElement = tabs.tabWidget({ renderMain, renderTab, - selectedTab: item2.uri, + selectedTab: item2, ...minimalOptions }) }) diff --git a/test/unit/utils/keyHelpers/accessData.test.ts b/test/unit/utils/keyHelpers/accessData.test.ts index afbd05881..fc3b26218 100644 --- a/test/unit/utils/keyHelpers/accessData.test.ts +++ b/test/unit/utils/keyHelpers/accessData.test.ts @@ -1,11 +1,7 @@ import { store } from 'solid-logic' -import { getKeyIfExists, pubKeyUrl, privKeyUrl, getExistingPublicKey, getExistingPrivateKey } from '../../../../src/utils/keyHelpers/accessData' +import { pubKeyUrl, privKeyUrl } from '../../../../src/utils/keyHelpers/accessData' import { NamedNode } from 'rdflib' -/* data */ -const PRIV_KEY = 'a11bc5d2eee6cdb3b37f5473a712cad905ccfb13fb2ccdbf1be0a1ac4fdc7d2a' -const PUB_KEY = '023a9da707bee1302f66083c9d95673ff969b41607a66f52686fa774d64ceb87' - /* mocks */ store.fetcher.load = jest.fn().mockImplementation(() => {}) store.fetcher.webOperation = jest.fn() diff --git a/test/unit/widgets/buttons.test.ts b/test/unit/widgets/buttons.test.ts index ea8df5381..c4f6203d2 100644 --- a/test/unit/widgets/buttons.test.ts +++ b/test/unit/widgets/buttons.test.ts @@ -44,13 +44,13 @@ import { } from '../../../src/widgets/buttons' import { graph, namedNode, NamedNode, sym } from 'rdflib' // @ts-ignore -import { foaf, rdf, sioc, vcard } from '../../../src/ns' +import ns from '../../../src/ns' // @ts-ignore import { icons } from '../../../src/iconBase' import { clearStore } from '../helpers/clearStore' import { domWithHead } from '../../helpers/dom-with-head' import { solidLogicSingleton } from 'solid-logic' -import * as style from '../../../src/style' +import { style } from '../../../src/style' const { iconBase } = icons const store = solidLogicSingleton.store @@ -229,7 +229,7 @@ describe('createNameDiv', () => { }) it('uses the name from the obj if no title is given', () => { - createNameDiv(dom, element, null, obj) + createNameDiv(dom, element, undefined, obj) expect(element.children[0].textContent).toEqual('name') }) }) @@ -274,31 +274,31 @@ describe('findImage', () => { expect(findImage).toBeInstanceOf(Function) }) it('handles foaf(Agent)', () => - expect(findImage(foaf('Agent'))).toEqual(iconBase + 'noun_98053.svg')) + expect(findImage(ns.foaf('Agent'))).toEqual(iconBase + 'noun_98053.svg')) it('handles rdf(Resource)', () => - expect(findImage(rdf('Resource'))).toEqual(iconBase + 'noun_98053.svg')) + expect(findImage(ns.rdf('Resource'))).toEqual(iconBase + 'noun_98053.svg')) it('handles sioc(avatar)', () => { - store.add(subject, sioc('avatar'), imageObject, subject.doc()) + store.add(subject, ns.sioc('avatar'), imageObject, subject.doc()) expect(findImage(subject)).toEqual(imageObject.uri) }) it('handles sioc(avatar)', () => { - store.add(subject, foaf('img'), imageObject, subject.doc()) + store.add(subject, ns.foaf('img'), imageObject, subject.doc()) expect(findImage(subject)).toEqual(imageObject.uri) }) it('handles vcard(logo)', () => { - store.add(subject, vcard('logo'), imageObject, subject.doc()) + store.add(subject, ns.vcard('logo'), imageObject, subject.doc()) expect(findImage(subject)).toEqual(imageObject.uri) }) it('handles vcard(hasPhoto)', () => { - store.add(subject, vcard('hasPhoto'), imageObject, subject.doc()) + store.add(subject, ns.vcard('hasPhoto'), imageObject, subject.doc()) expect(findImage(subject)).toEqual(imageObject.uri) }) it('handles vcard(photo)', () => { - store.add(subject, vcard('photo'), imageObject, subject.doc()) + store.add(subject, ns.vcard('photo'), imageObject, subject.doc()) expect(findImage(subject)).toEqual(imageObject.uri) }) it('handles foaf(depiction)', () => { - store.add(subject, foaf('depiction'), imageObject, subject.doc()) + store.add(subject, ns.foaf('depiction'), imageObject, subject.doc()) expect(findImage(subject)).toEqual(imageObject.uri) }) it('returns null when nothing is found', () => expect(findImage(subject)).toBeNull()) @@ -360,7 +360,7 @@ describe('index.twoLine', () => { expect(index.twoLine).toBeInstanceOf(Object) }) }) -describe("index.twoLine['']", () => { +describe('index.twoLine[\'\']', () => { it('exists', () => { expect(index.twoLine['']).toBeInstanceOf(Function) }) @@ -368,7 +368,7 @@ describe("index.twoLine['']", () => { expect(index.twoLine[''](dom, sym('https://domain.tld/#test'))).toBeTruthy() }) }) -describe("index.twoLine['http://www.w3.org/2000/10/swap/pim/qif#Transaction']", () => { +describe('index.twoLine[\'http://www.w3.org/2000/10/swap/pim/qif#Transaction\']', () => { it('exists', () => { expect(index.twoLine['http://www.w3.org/2000/10/swap/pim/qif#Transaction']).toBeInstanceOf( Function @@ -383,7 +383,7 @@ describe("index.twoLine['http://www.w3.org/2000/10/swap/pim/qif#Transaction']", ).toBeTruthy() }) }) -describe("index.twoLine['http://www.w3.org/ns/pim/trip#Trip']", () => { +describe('index.twoLine[\'http://www.w3.org/ns/pim/trip#Trip\']', () => { it('exists', () => { expect(index.twoLine['http://www.w3.org/ns/pim/trip#Trip']).toBeInstanceOf(Function) }) diff --git a/test/unit/widgets/forms/basic.test.ts b/test/unit/widgets/forms/basic.test.ts index 65ff56bc4..082625a98 100644 --- a/test/unit/widgets/forms/basic.test.ts +++ b/test/unit/widgets/forms/basic.test.ts @@ -6,7 +6,7 @@ import { basicField } from '../../../../src/widgets/forms/basic' import ns from '../../../../src/ns' -import { textInputStyle } from '../../../../src/style' +import { style } from '../../../../src/style' import { clearStore } from '../../helpers/clearStore' import { store } from 'solid-logic' @@ -647,8 +647,8 @@ describe('basicField', () => { doc, callbackFunction ) - const style = (result.childNodes[1].childNodes[0] as HTMLInputElement).getAttribute('style') - expect(style).toEqual('background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;text-align: right;') + const localStyle = (result.childNodes[1].childNodes[0] as HTMLInputElement).getAttribute('style') + expect(localStyle).toEqual('background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;text-align: right;') }) it('Defaults to textInputStyle', () => { @@ -671,8 +671,8 @@ describe('basicField', () => { doc, callbackFunction ) - const style = (result.childNodes[1].childNodes[0] as HTMLInputElement).getAttribute('style') - expect(style).toEqual(textInputStyle) + const inputStyle = (result.childNodes[1].childNodes[0] as HTMLInputElement).getAttribute('style') + expect(inputStyle).toEqual(style.textInputStyle) }) it('Can read type from fieldParams', () => { diff --git a/test/unit/widgets/forms/index.test.ts b/test/unit/widgets/forms/index.test.ts index b1f851351..c98d77128 100644 --- a/test/unit/widgets/forms/index.test.ts +++ b/test/unit/widgets/forms/index.test.ts @@ -1,6 +1,6 @@ import { silenceDebugMessages } from '../../helpers/debugger' import { namedNode } from 'rdflib' -import * as ns from '../../../../src/ns' +import ns from '../../../../src/ns' import { store } from 'solid-logic' // console.log('@@ solidLogicSingleton', solidLogicSingleton) diff --git a/test/unit/widgets/widgetHelpers.test.ts b/test/unit/widgets/widgetHelpers.test.ts index 7feca3f45..60c5c08cf 100644 --- a/test/unit/widgets/widgetHelpers.test.ts +++ b/test/unit/widgets/widgetHelpers.test.ts @@ -7,7 +7,7 @@ import { createImageDiv } from '../../../src/widgets/widgetHelpers' -const style = require('../../../src/style') +import { style } from '../../../src/style' silenceDebugMessages() let window: DOMWindow diff --git a/timestamp.sh b/timestamp.sh index dc7121ebb..88d512544 100755 --- a/timestamp.sh +++ b/timestamp.sh @@ -10,4 +10,4 @@ echo " npmInfo: {" echo " \"${key}\": \"${value}\"," done echo " }" -echo "};" \ No newline at end of file +echo "}" \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index e4ed9f069..1564a5c14 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,10 +1,11 @@ { "compilerOptions": { /* Basic Options */ - "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */, - "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, + "target": "ES2022" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */, + "module": "CommonJS" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, + "moduleResolution": "node", /* Use Node.js-style module resolution for Webpack compatibility. */ /* Crucial for library compatibility: */ - "skipLibCheck": true, + "skipLibCheck": true, // if true, Type errors in library .d.ts files will be ignored, so you might miss some issues. "allowSyntheticDefaultImports": true, // Often helps with ESM interop /* Crucial for library compatibility END */ "lib": [ @@ -20,7 +21,7 @@ "sourceMap": true /* Generates corresponding '.map' file. */, // "outFile": "./", /* Concatenate and emit output to single file. */ - "outDir": "lib" /* Redirect output structure to the directory. */, + "outDir": "dist" /* Redirect output structure to the directory. */, "rootDir": "src/", // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ @@ -57,7 +58,7 @@ // "typeRoots": [], /* List of folders to include type definitions from. */ "typeRoots": [ "node_modules/@types", - "typings" + "node_modules/@testing-library" ] /* List of folders to include type definitions from. */, // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ @@ -75,5 +76,6 @@ }, "include": [ "src/**/*" - ] + ], + "exclude": ["node_modules", "dist"] } diff --git a/tsconfig.test.json b/tsconfig.test.json new file mode 100644 index 000000000..b863b49d9 --- /dev/null +++ b/tsconfig.test.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "include": ["test/**/*"], + "compilerOptions": { + "rootDir": ".", + "noEmit": true + } +} \ No newline at end of file diff --git a/typings/raw-loader.d.ts b/typings/raw-loader.d.ts deleted file mode 100644 index d16cbef41..000000000 --- a/typings/raw-loader.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module '*.sparql' { - const content: string - export default content -} diff --git a/typings/solid-auth-tls/index.d.ts b/typings/solid-auth-tls/index.d.ts deleted file mode 100644 index 268959dad..000000000 --- a/typings/solid-auth-tls/index.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module 'solid-auth-tls' { - export class Signup { - signup: () => Promise - } -} diff --git a/webpack.config.js b/webpack.config.js index 80fa807e4..5128ad79a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,48 +1,189 @@ -const path = require('path') -const HtmlWebpackPlugin = require('html-webpack-plugin') - -// module.exports = [{ -module.exports = (env, args) => { - const production = args.mode === 'production' - return { - mode: args.mode || 'development', - entry: './lib/index.js', - output: { - path: path.join(__dirname, '/dist/'), - publicPath: '', - filename: production ? 'solid-ui.min.js' : 'solid-ui.js', - library: 'solid-ui', - libraryTarget: 'umd' +import path from 'path' +import HtmlWebpackPlugin from 'html-webpack-plugin' +import TerserPlugin from 'terser-webpack-plugin' + +const externalsBase = { + 'fs': 'null', + 'node-fetch': 'fetch', + 'isomorphic-fetch': 'fetch', + '@xmldom/xmldom': 'window', + 'text-encoding': 'TextEncoder', + 'whatwg-url': 'window', + '@trust/webcrypto': 'crypto' +} + +// rdflib externalized +const externalsWithoutRdflib = { + ...externalsBase, + rdflib: '$rdf' +} + +// rdflib bundled +const externalsWithRdflib = { + ...externalsBase +} + +const common = { + entry: './src/index.ts', + output: { + path: path.resolve(process.cwd(), 'dist'), + library: { + name: 'UI', + type: 'umd' }, - plugins: [ - new HtmlWebpackPlugin() // plugin that creates in /lib the index.html that contains the webpack-bundle.js - ], - externals: { - fs: 'null', - 'node-fetch': 'fetch', - 'isomorphic-fetch': 'fetch', - xmldom: 'window', - 'text-encoding': 'TextEncoder', - 'whatwg-url': 'window', - '@trust/webcrypto': 'crypto' + globalObject: 'this', + iife: true, + clean: false + }, + plugins: [ + new HtmlWebpackPlugin() + ], + resolve: { + extensions: ['.ts', '.tsx', '.js', '.jsx'], + extensionAlias: { + '.js': ['.js', '.ts'], + '.mjs': ['.mjs', '.mts'], }, - resolve: { - fallback: { path: false } + fallback: { path: false } + }, + devServer: { + static: './dist' + }, + devtool: 'source-map', + module: { + rules: [ + { + test: /\.(mjs|js|ts)$/, + exclude: /(node_modules|bower_components|dist)/, + use: { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { + modules: false // Preserve ES modules for webpack + }], + '@babel/preset-typescript' + ] + } + } + }, { + test: /\.sparql$/i, + type: 'asset/source' + }, { + test: /\.ttl$/i, + type: 'asset/source' + }] + } +} + +// UMD Minified, rdflib bundled +const minified = { + ...common, + mode: 'production', + output: { + ...common.output, + filename: 'solid-ui.min.js' + }, + externals: externalsWithRdflib, + optimization: { + minimize: true, + minimizer: [new TerserPlugin({ extractComments: false })] + } +} + +// UMD Unminified, rdflib bundled +const unminified = { + ...common, + mode: 'production', + output: { + ...common.output, + filename: 'solid-ui.js' + }, + externals: externalsWithRdflib, + optimization: { + minimize: false + } +} + +// UMD Minified, rdflib external +const minifiedWithRdflib = { + ...common, + mode: 'production', + output: { + ...common.output, + filename: 'solid-ui.external.min.js' + }, + externals: externalsWithoutRdflib, + optimization: { + minimize: true, + minimizer: [new TerserPlugin({ extractComments: false })] + } +} + +// UMD Unminified, rdflib external +const unminifiedWithRdflib = { + ...common, + mode: 'production', + output: { + ...common.output, + filename: 'solid-ui.external.js' + }, + externals: externalsWithoutRdflib, + optimization: { + minimize: false + } +} + +// ESM minified, rdflib external +const esmMinified = { + ...common, + output: { + path: path.resolve(process.cwd(), 'dist'), + filename: 'solid-ui.esm.external.min.js', + library: { + type: 'module' }, - devServer: { - static: './dist' + environment: { module: true }, + clean: false + }, + externals: externalsWithoutRdflib, + experiments: { + outputModule: true + }, + mode: 'production', + optimization: { + minimize: true, + minimizer: [new TerserPlugin({ extractComments: false })] + } +} + +// ESM unminified, rdflib external +const esmUnminified = { + ...common, + output: { + path: path.resolve(process.cwd(), 'dist'), + filename: 'solid-ui.esm.external.js', + library: { + type: 'module' }, - devtool: 'source-map', - module: { - rules: [{ - test: /\.sparql$/i, - type: 'asset/source' - }, - { - test: /\.ttl$/i, - type: 'asset/source' - } - ] - } + environment: { module: true }, + clean: false + }, + externals: externalsWithoutRdflib, + experiments: { + outputModule: true + }, + mode: 'production', + optimization: { + minimize: false } } + +export default [ + minified, + unminified, + minifiedWithRdflib, + unminifiedWithRdflib, + esmMinified, + esmUnminified +]