Skip to content

Commit fce3537

Browse files
timea-solidtimea-solid
committed
UMD and ESM bundles with rdflib external or not
1 parent 2add07c commit fce3537

File tree

5 files changed

+1304
-315
lines changed

5 files changed

+1304
-315
lines changed

‎README.md‎

Lines changed: 72 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,38 +21,87 @@ Table of content:
2121
Contributions of bug fixes and new functionality, documentation, and tests are
2222
always appreciated.
2323

24-
### In npm-based projects
25-
When including solid-ui in an npm-based project, you can use it with:
24+
## Install via npm
25+
26+
```sh
27+
npm install solid-ui
28+
```
2629

2730
```js
28-
import { ns, rdf, acl, aclControl, create, dom, icons, log, matrix, media,
29-
messageArea, infiniteMessageArea, pad, preferences, style, table, tabs, utils, widgets, versionInfo
30-
} from 'solid-ui'
31+
import * as UI from 'solid-ui'
32+
```
3133

34+
## Use directly in a browser
35+
36+
There are a few differences to mention:
37+
* the UMD bundles come in 2 flavours, with rdflib bundled together and without;
38+
* the ESM bundles do not contain rdflib, so it must be imported separately.
39+
40+
## Files
41+
- For browser UMD, bundled with rdflib: `dist/solid-ui.js` (global `window.UI`)
42+
- For browser UMD, without rdflib: `dist/solid-ui.external.js` (global `window.UI`)
43+
- For browser ESM, without rdflib: `dist/solid-ui.esm.external.js` (import as module)
44+
- UMD bundles come in chunked files
45+
- both version also containe minified versions.
46+
47+
48+
### UMD bundle (global variable)
49+
50+
```html
51+
<!-- Load dependencies first -->
52+
<script src="https://unpkg.com/rdflib/dist/rdflib.min.js"></script>
53+
<!-- or -->
54+
<!-- script src="https://cdn.jsdelivr.net/npm/rdflib/dist/rdflib.min.js"></script -->
55+
<!-- Load solid-ui UMD bundle -->
56+
<script src="https://unpkg.com/solid-ui/dist/solid-ui.external.min.js"></script>
57+
<!-- or -->
58+
<!-- script src="https://cdn.jsdelivr.net/npm/solid-ui/dist/solid-ui.external.min.js"></script -->
59+
<!-- or -->
60+
<!-- script src="dist/solid-ui.js"></script -->
61+
<script>
62+
// Access via global variable
63+
const UI = window.UI;
64+
// Create a button
65+
const solidLogo = 'https://solidproject.org/assets/img/solid-emblem.svg'
66+
const myButton = UI.widgets.button(document, solidLogo, 'test', () => window.alert('clicked!'))
67+
UI.widgets.clearElement(document.body)
68+
document.body.appendChild(myButton)
69+
</script>
3270
```
33-
### Directly in a webpage
34-
Clone this repo, and in the repo root run:
3571

36-
* `npm install`
37-
* `npm run build`
3872

39-
This will generate a `dist/` folder containing, among other artifacts, `dist/solid-ui.js`.
40-
Now run `npx serve` and go to http://localhost:3000/docs/ with your browser to see some examples.
73+
### ESM bundle (import as module)
4174

42-
While viewing one of those examples, you can open the web console in your browser and for instance
43-
try how you can create a button:
44-
```js
45-
const solidLogo = 'https://solidproject.org/assets/img/solid-emblem.svg'
46-
const myButton = UI.widgets.button(document, solidLogo, 'test', () => window.alert('clicked!'))
47-
UI.widgets.clearElement(document.body)
48-
document.body.appendChild(myButton)
75+
```html
76+
<script type="module">
77+
import * as $rdf from 'https://esm.sh/rdflib'
78+
import { someFunction } from 'https://esm.sh/solid-ui'
79+
80+
// Example usage
81+
// someFunction(...)
82+
</script>
4983
```
5084

51-
Or a chat widget:
52-
```js
53-
const chatChannel = 'https://example-user.inrupt.net/public/example-chat/index.ttl#this'
54-
const chat = UI.infiniteMessageArea(document, store, UI.rdf.namedNode(chatChannel))
55-
document.body.appendChild(chat)
85+
or
86+
87+
### ESM bundle with import map (bare specifiers)
88+
89+
```html
90+
<script type="importmap">
91+
{
92+
"imports": {
93+
"rdflib": "https://esm.sh/rdflib",
94+
"solid-ui": "https://esm.sh/solid-ui"
95+
}
96+
}
97+
</script>
98+
<script type="module">
99+
import * as $rdf from 'rdflib'
100+
import { someFunction } from 'solid-ui'
101+
102+
// Example usage
103+
// someFunction(...)
104+
</script>
56105
```
57106

58107
### Development new components

‎examples/header/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<head>
55
<meta charset='UTF-8'>
66
<title>solid-ui UI.widgets.header examples page</title>
7-
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
8-
<script type="text/javascript" src="../../lib/index.js"></script> <script>
7+
<script src="../../dist/solid-ui.js"></script>
8+
<script>
99
const $ = document.querySelector.bind(document)
1010
function showSource(widgetName) {
1111
$(`#viewSource-${widgetName}`).innerHTML = $(`#script-${widgetName}`).innerText
@@ -27,11 +27,11 @@ <h2 id="header"><a href="#header">Header</a>
2727
loginBanner.appendChild(UI.login.loginStatusBox(document, null, {}));
2828

2929
async function finishLogin() {
30-
await UI.authSession.handleIncomingRedirect();
31-
const session = UI.authSession;
30+
await UI.authn.authSession.handleIncomingRedirect();
31+
const session = UI.authn.authSession;
3232
if (session.info.isLoggedIn) {
3333
// Update the page with the status.
34-
webId.innerHTML = "Logged in as: " + authn.currentUser().uri;
34+
webId.innerHTML = "Logged in as: " + session.currentUser().uri;
3535
} else {
3636
webId.innerHTML = "";
3737
}

0 commit comments

Comments
 (0)