~repos /atoms-element

#js

git clone https://pyrossh.dev/repos/atoms-element.git

A simple web component library for defining your custom elements. It works on both client and server.

Readme
|
Commits
|
Files
d3d1eec5 — Peter John

4 years ago 
fix vars issues
Files changed (2) hide show
  1. index.js +21 -24
  2. index.test.js +14 -14
index.js CHANGED
@@ -747,9 +747,9 @@ const classLookup = {
747
747
  ...mapApply(radius),
748
748
  static: createStyle('position', 'static'),
749
749
  fixed: createStyle('position', 'fixed'),
750
- absolute: createStyle('absolute', 'fixed'),
750
+ absolute: createStyle('position', 'absolute'),
751
- relative: createStyle('relative', 'fixed'),
751
+ relative: createStyle('position', 'relative'),
752
- sticky: createStyle('sticky', 'fixed'),
752
+ sticky: createStyle('position', 'sticky'),
753
753
  'overflow-auto': createStyle('overflow', 'auto'),
754
754
  'overflow-hidden': createStyle('overflow', 'hidden'),
755
755
  'overflow-visible': createStyle('overflow', 'visible'),
@@ -771,21 +771,21 @@ const classLookup = {
771
771
  'origin-bottom-left': createStyle('transformOrigin', 'bottom left'),
772
772
  'origin-left': createStyle('transformOrigin', 'left'),
773
773
  'origin-top-left': createStyle('transformOrigin', 'top left'),
774
- 'shadow-sm': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05'),
774
+ 'shadow-sm': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
775
- shadow: createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06'),
775
+ shadow: createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'),
776
- 'shadow-md': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06'),
776
+ 'shadow-md': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'),
777
- 'shadow-lg': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05'),
777
+ 'shadow-lg': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'),
778
- 'shadow-xl': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04'),
778
+ 'shadow-xl': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'),
779
- 'shadow-2xl': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25'),
779
+ 'shadow-2xl': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25)'),
780
- 'shadow-inner': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, inset 0 2px 4px 0 rgba(0, 0, 0, 0.06'),
780
+ 'shadow-inner': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)'),
781
781
  'shadow-none': createStyle('box-shadow', '0 0 #0000, 0 0 #0000, 0 0 #0000'),
782
782
  'ring-inset': createStyle('--tw-ring-inset', 'insest'),
783
- 'ring-0': createStyle('box-shadow', ' 0 0 0 calc(0px + 0px) rgba(59, 130, 246, 0.5'),
783
+ 'ring-0': createStyle('box-shadow', ' 0 0 0 calc(0px + 0px) rgba(59, 130, 246, 0.5)'),
784
- 'ring-1': createStyle('box-shadow', ' 0 0 0 calc(1px + 0px) rgba(59, 130, 246, 0.5'),
784
+ 'ring-1': createStyle('box-shadow', ' 0 0 0 calc(1px + 0px) rgba(59, 130, 246, 0.5)'),
785
- 'ring-2': createStyle('box-shadow', ' 0 0 0 calc(2px + 0px) rgba(59, 130, 246, 0.5'),
785
+ 'ring-2': createStyle('box-shadow', ' 0 0 0 calc(2px + 0px) rgba(59, 130, 246, 0.5)'),
786
- 'ring-4': createStyle('box-shadow', ' 0 0 0 calc(4px + 0px) rgba(59, 130, 246, 0.5'),
786
+ 'ring-4': createStyle('box-shadow', ' 0 0 0 calc(4px + 0px) rgba(59, 130, 246, 0.5)'),
787
- 'ring-8': createStyle('box-shadow', ' 0 0 0 calc(8px + 0px) rgba(59, 130, 246, 0.5'),
787
+ 'ring-8': createStyle('box-shadow', ' 0 0 0 calc(8px + 0px) rgba(59, 130, 246, 0.5)'),
788
- ring: createStyle('box-shadow', ' 0 0 0 calc(3px + 0px) rgba(59, 130, 246, 0.5'),
788
+ ring: createStyle('box-shadow', ' 0 0 0 calc(3px + 0px) rgba(59, 130, 246, 0.5)'),
789
789
  };
790
790
 
791
791
  const pageStyles = {
@@ -1030,6 +1030,7 @@ export const createElement = (meta, renderFn) => {
1030
1030
  effects: {},
1031
1031
  cleanups: {},
1032
1032
  };
1033
+ this.renderFn = renderFn;
1033
1034
  // this.prevClassList = [];
1034
1035
  // this.shadow = this.attachShadow({ mode: 'open' });
1035
1036
  }
@@ -1103,7 +1104,7 @@ export const createElement = (meta, renderFn) => {
1103
1104
 
1104
1105
  render() {
1105
1106
  currentComponent.set(this);
1106
- const template = renderFn({
1107
+ const template = this.renderFn({
1107
1108
  ...this.attrs,
1108
1109
  config: isBrowser ? window.props.config : global?.props?.config,
1109
1110
  location: isBrowser ? window.location : global?.location,
@@ -1141,14 +1142,10 @@ export const createElement = (meta, renderFn) => {
1141
1142
  }
1142
1143
  };
1143
1144
  const parts = meta.url.split('/');
1144
- const name = parts[parts.length - 1].replace('.js', '');
1145
+ const name = parts[parts.length - 1].split('?')[0].replace('.js', '');
1145
1146
  registry[name] = RenderElement;
1146
- if (isBrowser) {
1147
- if (window.customElements.get(name)) {
1147
+ if (isBrowser && !window.customElements.get(name)) {
1148
- return;
1149
- } else {
1150
- window.customElements.define(name, registry[name]);
1148
+ window.customElements.define(name, registry[name]);
1151
- }
1152
1149
  }
1153
1150
  return renderFn;
1154
1151
  };
index.test.js CHANGED
@@ -33,7 +33,7 @@ test('compileTw', () => {
33
33
  expect(compileTw('text-white font-bold border border-black p-4 m-4 w-20 h-20'.split(' '))).toMatchSnapshot();
34
34
  });
35
35
 
36
- test('renderHtml', async () => {
36
+ test('renderHtml', () => {
37
37
  const age = 1;
38
38
  const data = { name: '123', address: { street: '1' } };
39
39
  const items = [1, 2, 3];
@@ -43,21 +43,21 @@ test('renderHtml', async () => {
43
43
  <app-counter name="123" class="abc ${highlight}" age=${age} details1=${data} items=${items}></app-counter>
44
44
  </div>
45
45
  `;
46
- const res = await renderHtml(template);
46
+ const res = renderHtml(template);
47
47
  expect(res).toMatchSnapshot();
48
48
  });
49
49
 
50
- test('render attribute keys', async () => {
50
+ test('render attribute keys', () => {
51
51
  const template = html`
52
52
  <div>
53
53
  <app-counter name="123" perPage="1"></app-counter>
54
54
  </div>
55
55
  `;
56
- const res = await renderHtml(template);
56
+ const res = renderHtml(template);
57
57
  expect(res).toMatchSnapshot();
58
58
  });
59
59
 
60
- test('render attributes within quotes', async () => {
60
+ test('render attributes within quotes', () => {
61
61
  const age = 1;
62
62
  const data = { name: '123', address: { street: '1' } };
63
63
  const items = [1, 2, 3];
@@ -67,24 +67,24 @@ test('render attributes within quotes', async () => {
67
67
  <app-counter name="123" class=${classes} age="${age}" details1="${data}" items="${items}"></app-counter>
68
68
  </div>
69
69
  `;
70
- const res = await renderHtml(template);
70
+ const res = renderHtml(template);
71
71
  expect(res).toMatchSnapshot();
72
72
  });
73
73
 
74
- test('render unsafeHTML', async () => {
74
+ test('render unsafeHTML', () => {
75
75
  const textContent = `<div><p class="123">this is unsafe</p></div>`;
76
76
  const template = html` <div>${unsafeHTML(textContent)}</div> `;
77
- const res = await renderHtml(template);
77
+ const res = renderHtml(template);
78
78
  expect(res).toMatchSnapshot();
79
79
  });
80
80
 
81
- test('render single template', async () => {
81
+ test('render single template', () => {
82
82
  const template = html` <div>${html`NoCountry ${false}`}</div> `;
83
- const res = await renderHtml(template);
83
+ const res = renderHtml(template);
84
84
  expect(res).toMatchSnapshot();
85
85
  });
86
86
 
87
- test('render multi template', async () => {
87
+ test('render multi template', () => {
88
88
  const template = html`
89
89
  <div>
90
90
  ${[1, 2].map(
@@ -96,7 +96,7 @@ test('render multi template', async () => {
96
96
  )}
97
97
  </div>
98
98
  `;
99
- const res = await renderHtml(template);
99
+ const res = renderHtml(template);
100
100
  expect(res).toMatchSnapshot();
101
101
  });
102
102
 
@@ -123,7 +123,7 @@ test('createReducer', () => {
123
123
  expect(mock).toBeCalledWith({ count: 1 });
124
124
  });
125
125
 
126
- test('createElement without attrs', async () => {
126
+ test('createElement without attrs', () => {
127
127
  createElement({ url: '/base-element.js' }, () => {
128
128
  return html` <div></div> `;
129
129
  });
@@ -133,7 +133,7 @@ test('createElement without attrs', async () => {
133
133
  expect(res).toMatchSnapshot();
134
134
  });
135
135
 
136
- test('createElement with attrs and hooks', async () => {
136
+ test('createElement with attrs and hooks', () => {
137
137
  createElement({ url: '/base-element.js' }, ({ perPage }) => {
138
138
  const { count, actions } = useReducer({
139
139
  initial: {