pikax / vue-composable / 94

Build # 94

Build Type

circleci

Committed by Carlos Rodrigues

Commit Message

fix(docs): docs and add onMounted()

Pull Request Pull Request #17: feat: Add useScript

Run Details

161 of 169 branches covered (95.27%)

Branch coverage included in aggregate %.

30 of 30 new or added lines in 3 files covered. (100.0%)

385 of 407 relevant lines covered (94.59%)

783.45 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

9.38

/src/web/script.ts

import { ref, Ref, onMounted } from "@vue/composition-api";
import { isString } from "../utils";

interface ScriptOptions {
  src: string;
  async?: boolean;
  defer?: boolean;
  module?: boolean;
}

interface ScriptReturn {
  loading: Ref<boolean>;
  error: Ref<boolean>;
  success: Ref<boolean>;
}

export function useScript(opts: ScriptOptions): ScriptReturn;
export function useScript(name: string): ScriptReturn;
export function useScript(options: string | ScriptOptions): ScriptReturn {
  const loading = ref(true);
  const error = ref(false);
  const success = ref(false);

  const opts = isString(options) ? { src: options } : options;

  onMounted(() => {
    const script = document.createElement("script");
    script.async = opts.async || false;
    script.defer = opts.defer || false;
    if (opts.module) {
      script.type = "module";
    }

    script.addEventListener(
      "load",
      () => {
        loading.value = false;
        success.value = true;
        error.value = false;
      },
      { passive: true }
    );
    script.addEventListener(
      "error",
      () => {
        loading.value = false;
        success.value = false;
        error.value = true;
      },
      {
        passive: true
      }
    );
    script.src = opts.src;

    document.body.appendChild(script);
  });

  return {
    loading,
    error,
    success
  };
}

1	import { ref, Ref, onMounted } from "@vue/composition-api";	4✔
2	import { isString } from "../utils";	4✔
3
4	interface ScriptOptions {
5	src: string;
6	async?: boolean;
7	defer?: boolean;
8	module?: boolean;
9	}
10
11	interface ScriptReturn {
12	loading: Ref<boolean>;
13	error: Ref<boolean>;
14	success: Ref<boolean>;
15	}
16
17	export function useScript(opts: ScriptOptions): ScriptReturn;
18	export function useScript(name: string): ScriptReturn;
19	export function useScript(options: string \| ScriptOptions): ScriptReturn {	4✔
20	const loading = ref(true);	×
21	const error = ref(false);	×
22	const success = ref(false);	×
23
24	const opts = isString(options) ? { src: options } : options;	×
25
26	onMounted(() => {	×
27	const script = document.createElement("script");	×
28	script.async = opts.async \|\| false;	×
29	script.defer = opts.defer \|\| false;	×
30	if (opts.module) {	×
31	script.type = "module";	×
32	}
33
34	script.addEventListener(	×
35	"load",
36	() => {
37	loading.value = false;	×
38	success.value = true;	×
39	error.value = false;	×
40	},
41	{ passive: true }
42	);
43	script.addEventListener(	×
44	"error",
45	() => {
46	loading.value = false;	×
47	success.value = false;	×
48	error.value = true;	×
49	},
50	{
51	passive: true
52	}
53	);
54	script.src = opts.src;	×
55
56	document.body.appendChild(script);	×
57	});
58
59	return {	×
60	loading,
61	error,
62	success
63	};
64	}

pikax / vue-composable / 94

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous