~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
7df8e293 — Peter John

4 years ago 
Update typings
Files changed (5) hide show
  1. element.d.ts +14 -20
  2. element.js +2 -0
  3. package.json +1 -1
  4. page.d.ts +20 -5
  5. readme.md +1 -1
element.d.ts CHANGED
@@ -17,31 +17,25 @@ export declare type Location = {
17
17
  toString: () => string;
18
18
  }
19
19
 
20
- export default class AtomsElement {
20
+ export class AtomsElement {
21
21
  static register(): () => void;
22
22
  static observedAttributes: Array<string>;
23
23
  static getElement: (name: string) => AtomsElement | undefined;
24
- config: Config;
25
- location: Location;
26
24
  attrs: {[key: string]: any};
27
25
  state: {[key: string]: any};
28
26
  computed: {[key: string]: any};
29
- styles: () => string;
27
+ styles: {[key: string]: any};
30
28
  }
29
+ export const getConfig = () => Config;
30
+ export const getLocation = () => Location;
31
31
 
32
- // declare type Colors = 'red' | 'purple' | 'blue' | 'green';
33
- // declare type Luminance = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
34
- // declare type BgColor = `bg-${Colors}-${Luminance}`;
35
- // declare type Distance = 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
36
- // declare type Breakpoints = 'xs:' | 'sm:' | 'md:' | 'lg:' | 'xl:' | '';
37
- // declare type Space = `${Breakpoints}space-${'x' | 'y'}-${Distance}`;
38
- // declare type ValidClass = Space | BgColor;
39
- // declare type Tailwind<S> = S extends `${infer Class} ${infer Rest}` ? Class extends ValidClass ? `${Class} ${Tailwind<Rest>}` : never : S extends `${infer Class}` ? Class extends ValidClass ? S : never : never;
40
- // declare function doSomethingWithTwClass<S>(cls: Tailwind<S>): Tailwind<S>;
41
- // declare const bad: never;
42
- // declare const bad2: never;
43
- // declare const bad3: never;
44
- // declare const bad4: never;
45
- // declare const good: "bg-red-400 space-x-4 md:space-x-8";
46
- // declare const good2: "bg-red-400 space-x-4";
47
- // declare const good3: "space-x-1.5 bg-blue-200";
32
+ export type CreateElementProps = {
33
+ name: () => string;
34
+ attrTypes: () => {[key: string]: any};
35
+ stateTypes: () => {[key: string]: any};
36
+ computedTypes: () => {[key: string]: any};
37
+ styles: {[key: string]: any};
38
+ render: () => any
39
+ }
40
+
41
+ export const createElement = (props: CreateElementProps) => CreateElementProps;
element.js CHANGED
@@ -422,6 +422,8 @@ export class AtomsElement extends BaseElement {
422
422
  }
423
423
  }
424
424
  }
425
+ export const getConfig = () => (isBrowser ? window.config : global.config);
426
+ export const getLocation = () => (isBrowser ? window.location : global.location);
425
427
 
426
428
  export const createElement = ({ name, attrTypes, stateTypes, computedTypes, styles, render }) => {
427
429
  const Element = class extends AtomsElement {
package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "atoms-element",
3
- "version": "2.1.0",
3
+ "version": "2.2.0",
4
4
  "description": "A simple web component library for defining your custom elements. It works on both client and server. It supports hooks and follows the same principles of react.",
5
5
  "keywords": [
6
6
  "pyros.sh",
page.d.ts CHANGED
@@ -15,12 +15,27 @@ export declare type Config = {
15
15
  export declare type Data = any;
16
16
  export declare type Item = any;
17
17
 
18
+ export type find = (node: any) => void;
19
+ export type ssr = (template: any) => string;
20
+
18
- export class Page {
21
+ export type Props = {
19
22
  config: Config;
20
23
  data: Data;
21
24
  item: Item;
22
- route: () => string;
23
- styles: () => string;
24
- head: () => string;
25
- body: () => string;
26
25
  }
26
+ export type Handler = (props: Props) => string;
27
+ export type CreatePageProps = {
28
+ route: Handler;
29
+ datapaths: Handler;
30
+ head: Handler;
31
+ body: Handler;
32
+ styles: {[key: string]: any};
33
+ }
34
+ export type PageRenderProps = {
35
+ config: Config;
36
+ data: Data;
37
+ item: Item;
38
+ headScript: string;
39
+ bodyScript: string;
40
+ }
41
+ export const createPage = (props: CreatePageProps) => (props: PageRenderProps) => string;
readme.md CHANGED
@@ -16,7 +16,7 @@ After going through all these libraries,
16
16
 
17
17
  1. [lit-html](https://github.com/lit/lit)
18
18
  2. [lit-html-server](https://github.com/popeindustries/lit-html-server)
19
- 3. [haunted](hhttps://github.com/matthewp/haunted)
19
+ 3. [haunted](https://github.com/matthewp/haunted)
20
20
  4. [Tonic](https://github.com/optoolco/tonic)
21
21
  5. [Atomico](https://github.com/atomicojs/atomico)
22
22
  6. [fuco](https://github.com/wtnbass/fuco)