@li3/use 0.1.6 → 0.1.7

package/dist/src/async-state.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @example
+ *    import { useAsyncState } from '@li3/use/async-state';
+ *
+ *    const { data, error, loading, empty, update } = useAsyncState();
+ *    update();
+ */
+export declare function useAsyncState<T>(effect?: (...args: any[]) => Promise<T>): {
+    data: any;
+    error: any;
+    loading: any;
+    empty: any;
+    update: (...args: any[]) => Promise<void>;
+};

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { useAsyncState } from "./async-state.js";
+export { useQuery } from "./query.js";

package/dist/src/query.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @example
+ *    import { useQuery } from '@li3/use/async-state';
+ *
+ *    const listItems = useQuery('li');
+ *
+ *    for (const li of listItems.all) {
+ *      // ...
+ *    }
+ */
+export declare function useQuery(selector: string): {
+    readonly one: any;
+    readonly all: any;
+};

package/dist/src/vue.d.ts

@@ -0,0 +1 @@
+export declare function useVue(): void;

package/index.js

@@ -0,0 +1 @@
+import{ref as e,getElement as r}from"@li3/web";function t(r=fetch){const t=e(""),l=e(!1),a=e(!1),n=e(null);return{data:n,error:t,loading:l,empty:a,update:async(...e)=>{l.value=!0,a.value=!1;try{const t=await r(...e);n.value=t,a.value=Array.isArray(t)?!t.length:!t}catch(e){a.value=!1,t.value=e}finally{l.value=!1}}}}function l(e){const t=r();return{get one(){return t.querySelector(e)},get all(){return t.querySelectorAll(e)}}}export{t as useAsyncState,l as useQuery};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@li3/use",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "exports": {
     ".": "./dist/index.js",
     "./*": {

package/src/async-state.ts

@@ -0,0 +1,33 @@
+import { ref } from "@li3/web";
+
+/**
+ * @example
+ *    import { useAsyncState } from '@li3/use/async-state';
+ *
+ *    const { data, error, loading, empty, update } = useAsyncState();
+ *    update();
+ */
+export function useAsyncState<T>(effect: (...args: any[]) => Promise<T> = fetch as any) {
+  const error = ref("");
+  const loading = ref(false);
+  const empty = ref(false);
+  const data = ref(null);
+
+  const update = async (...args: any[]) => {
+    loading.value = true;
+    empty.value = false;
+
+    try {
+      const v = await effect(...args);
+      data.value = v;
+      empty.value = Array.isArray(v) ? !v.length : !v;
+    } catch (e) {
+      empty.value = false;
+      error.value = e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return { data, error, loading, empty, update };
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { useAsyncState } from "./async-state.js";
+export { useQuery } from "./query.js";

package/src/query.ts

@@ -0,0 +1,25 @@
+import { getElement } from "@li3/web";
+
+/**
+ * @example
+ *    import { useQuery } from '@li3/use/async-state';
+ *
+ *    const listItems = useQuery('li');
+ *
+ *    for (const li of listItems.all) {
+ *      // ...
+ *    }
+ */
+export function useQuery(selector: string) {
+  const element = getElement();
+
+  return {
+    get one() {
+      return element.querySelector(selector);
+    },
+
+    get all() {
+      return element.querySelectorAll(selector);
+    },
+  };
+}

package/src/vue.ts

@@ -0,0 +1,61 @@
+import { TemplateFor, TemplateIf, SetProperty, AddEventListener, use } from '@li3/web';
+
+export function useVue() {
+  const vFor = 'v-for';
+  const vIf = 'v-if';
+
+  class VueTemplateFor extends TemplateFor {
+    match(_node, name) {
+      return name === vFor;
+    }
+
+    exec(node, _name, value, context) {
+      const t = document.createElement('template');
+      node.replaceWith(t);
+      node.removeAttribute(vFor);
+      t.content.append(node);
+
+      super.exec(t, 'for', value, context);
+    }
+  }
+
+  class VueTemplateIf extends TemplateIf {
+    match(_node, name) {
+      return name === vIf;
+    }
+
+    exec(node, _name, value, context) {
+      const t = document.createElement('template');
+      node.replaceWith(t);
+      node.removeAttribute(vFor);
+      t.content.append(node);
+
+      super.exec(t, 'if', value, context);
+    }
+  }
+
+  class VueSetProperty extends SetProperty {
+    match(_node, name) {
+      return name.at(0) === ':';
+    }
+
+    exec(node, name, value, context) {
+      return super.exec(node, 'bind-' + name.slice(1), value, context);
+    }
+  }
+
+  class VueEventListener extends AddEventListener {
+    match(_node, name) {
+      return name.at(0) === '@';
+    }
+
+    exec(node, name, value, context) {
+      return super.exec(node, 'on-' + name.slice(1), value, context);
+    }
+  }
+
+  use(new VueSetProperty());
+  use(new VueTemplateFor());
+  use(new VueTemplateIf());
+  use(new VueEventListener());
+}