Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Experimental/custom elements #144

Merged
merged 15 commits into from
Nov 1, 2020
Merged

Experimental/custom elements #144

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e199432
Remove useless file
aabounegm Oct 27, 2020
4b2dea6
Add option to compile as customElements
aabounegm Oct 27, 2020
4a889bf
Add example for demo with a couple of components
aabounegm Oct 27, 2020
dd7a81c
Update dependencies (minor version)
aabounegm Oct 27, 2020
320c85b
Add custom tag to all components
aabounegm Oct 31, 2020
30d19bc
Export utils as well from main entry point
aabounegm Oct 31, 2020
2aea85c
Add event listening and prop setting examples
aabounegm Oct 31, 2020
0b549d5
Wrap button's click event in nativeEvent object
aabounegm Oct 31, 2020
46a8d3b
Add documentation on how to use customElements
aabounegm Oct 31, 2020
eb3f850
Mention customElements in README and CHANGELOG
aabounegm Oct 31, 2020
5f98631
Fix typos
aabounegm Nov 1, 2020
fec9622
Rename file to use dash instead of camelCase
aabounegm Nov 1, 2020
dd645bf
Make unpkg a link
aabounegm Nov 1, 2020
4edc424
Remove demo html page
aabounegm Nov 1, 2020
8f7ad87
Fix tag name
aabounegm Nov 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added attractions/_attractions-theme.scss
View file
Open in desktop
Empty file.
4 changes: 4 additions & 0 deletions attractions/button/button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<!-- TODO: Decide whether to write out all tag names or leave them as null
aabounegm marked this conversation as resolved.
Show resolved Hide resolved
for the users to set manually -->
<svelte:options tag="a-button" />

<script>
import { createEventDispatcher } from 'svelte';
import ripple from '../utils/ripple.js';
Expand Down
2 changes: 0 additions & 2 deletions attractions/button/index.js
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions attractions/card/card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<svelte:options tag="a-card" />

<script>
import classes from '../utils/classes.js';

Expand Down
4 changes: 3 additions & 1 deletion attractions/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@
],
"devDependencies": {
"@rollup/plugin-node-resolve": "^9.0.0",
"node-sass": "^4.14.1",
"pkg-versions": "^2.1.0",
"rollup": "^2.18.2",
"rollup-plugin-svelte": "^5.2.3",
"svelte": "^3.23.2"
"svelte": "^3.23.2",
"svelte-preprocess": "^4.5.2"
},
"peerDependencies": {
"node-sass": "^4.14.1",
Expand Down
43 changes: 32 additions & 11 deletions attractions/rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,41 @@
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import autoPreprocess from 'svelte-preprocess';
import pkg from './package.json';

const name = pkg.name
.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
.replace(/^\w/, m => m.toUpperCase())
.replace(/-\w/g, m => m[1].toUpperCase());

export default {
input: 'index.js',
output: [
{ file: pkg.module, 'format': 'es' },
{ file: pkg.main, 'format': 'umd', name },
],
plugins: [
svelte(),
resolve(),
],
};
export default [
{
input: 'index.js',
output: [
{ file: pkg.module, 'format': 'es' },
{ file: pkg.main, 'format': 'umd', name },
],
plugins: [
svelte(),
resolve(),
],
},
{
// This will likely replace the other configuration above
aabounegm marked this conversation as resolved.
Show resolved Hide resolved
input: 'index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'attractions',
},
plugins: [
svelte({
customElement: true,
preprocess: autoPreprocess({
scss: { includePaths: ['./'] },
}),
}),
resolve(),
],
},
];
2 changes: 2 additions & 0 deletions attractions/switch/switch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<svelte:options tag="a-switch" />

<script>
import { createEventDispatcher } from 'svelte';
import classes from '../utils/classes.js';
Expand Down
40 changes: 40 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components demo</title>

<!-- ultimately should be something like https://unpkg.com/[email protected]/dist/index.js -->
<script src="../attractions/dist/bundle.js"></script>
</head>

<body>
<a-card>
<a-button filled="true" danger="true">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it even possible to use any props that are not boolean or string? I'm pretty sure HTML treats all props as strings

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, but a string is still truthy, so we should be ok here as long as we don't compare with === true or similar. About other data types, that still needs investigation

Alert
</a-button>
<!-- camelCase props seem to not work (HTML is case-insensitive) -->
<a-switch slotLeft="true">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we should reconsider the way we name our boolean and string props to be compatible with this

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or not rename, but add an "alias", perhaps

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is that even possible?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean another prop that would act as a fallback. If slotLeft is false (or maybe null or some other default signifying its absence), check the value of slotleft. But that's kinda hacky and I don't like it.
Do we even have that many important props with camelCase names? I mean, people can still use .$$set

On?
</a-switch>
</a-card>

<div id="container">
<!-- more elements will be injected here -->
</div>

<script>
// Or using the normal constructor
const { Button } = attractions;
new Button({
target: document.getElementById('container'),
props: {
filled: true,
},
});

// TODO: figure out how to listen to events
aabounegm marked this conversation as resolved.
Show resolved Hide resolved
</script>
</body>
</html>
Loading