chore: lint

vueuse · Aug 1, 2022 · cb7269f · cb7269f
1 parent c02a96f
commit cb7269f
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 194 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
 
 jobs:
   release:

diff --git a/README.md b/README.md
@@ -21,23 +21,23 @@ yarn add @vueuse/head
 Register the Vue plugin:
 
 ```ts
-import { createApp } from 'vue'
-import { createHead } from '@vueuse/head'
+import { createApp } from "vue"
+import { createHead } from "@vueuse/head"
 
 const app = createApp()
 const head = createHead()
 
 app.use(head)
 
-app.mount('#app')
+app.mount("#app")
 ```
 
 Manage `head` with the composition API `useHead` in your component:
 
 ```vue
 <script>
-import { defineComponent, computed, reactive } from 'vue'
-import { useHead } from '@vueuse/head'
+import { defineComponent, computed, reactive } from "vue"
+import { useHead } from "@vueuse/head"
 
 export default defineComponent({
   setup() {
@@ -64,8 +64,8 @@ export default defineComponent({
 ### Server-side rendering
 
 ```ts
-import { renderToString } from '@vue/server-renderer'
-import { renderHeadToString } from '@vueuse/head'
+import { renderToString } from "@vue/server-renderer"
+import { renderHeadToString } from "@vueuse/head"
 
 const appHTML = await renderToString(yourVueApp)
 
@@ -120,14 +120,14 @@ For `meta` tags, we use `name` and `property` to prevent duplicated tags, you ca
 useHead({
   meta: [
     {
-      property: 'og:locale:alternate',
-      content: 'zh',
-      key: 'zh',
+      property: "og:locale:alternate",
+      content: "zh",
+      key: "zh",
     },
     {
-      property: 'og:locale:alternate',
-      content: 'en',
-      key: 'en',
+      property: "og:locale:alternate",
+      content: "en",
+      key: "en",
     },
   ],
 })
@@ -140,7 +140,7 @@ useHead({
   script: [
     {
       children: `console.log('Hello world!')`,
-      body: true
+      body: true,
     },
   ],
 })
@@ -166,12 +166,12 @@ useHead({
 `useHead` also takes reactive object or ref as the argument, for example:
 
 ```ts
-const head = reactive({ title: 'Website Title' })
+const head = reactive({ title: "Website Title" })
 useHead(head)
 ```
 
 ```ts
-const title = ref('Website Title')
+const title = ref("Website Title")
 useHead({ title })
 ```
 
@@ -181,7 +181,7 @@ Besides `useHead`, you can also manipulate head tags using the `<Head>` componen
 
 ```vue
 <script setup lang="ts">
-import { Head } from '@vueuse/head'
+import { Head } from "@vueuse/head"
 </script>
 
 <template>

diff --git a/example/Contact.vue b/example/Contact.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { ref } from 'vue'
-import { Head } from '../src'
+import { ref } from "vue"
+import { Head } from "../src"
 
 const count = ref(0)
 

diff --git a/example/app.tsx b/example/app.tsx
@@ -1,22 +1,22 @@
-import { createSSRApp, ref, h, defineComponent, computed } from 'vue'
+import { createSSRApp, ref, h, defineComponent, computed } from "vue"
 import {
   createRouter,
   createWebHistory,
   createMemoryHistory,
   RouterLink,
   RouterView,
-} from 'vue-router'
-import { createHead, useHead } from '../src'
-import Contact from './Contact.vue'
+} from "vue-router"
+import { createHead, useHead } from "../src"
+import Contact from "./Contact.vue"
 
 export const createApp = () => {
   const Counter = defineComponent({
     setup() {
       const count = ref(0)
       useHead({
         title: computed(() => `count: ${count.value}`),
-        script: [{ children: 'console.log("a")', key: 'a' }],
-        link: [{ href: '/foo', rel: 'stylesheet' }],
+        script: [{ children: 'console.log("a")', key: "a" }],
+        link: [{ href: "/foo", rel: "stylesheet" }],
       })
       return () => (
         <button
@@ -33,51 +33,51 @@ export const createApp = () => {
 
   const Home = defineComponent({
     setup() {
-      const title = ref('Home')
+      const title = ref("Home")
       useHead({
         title,
-        base: { href: '/' },
+        base: { href: "/" },
         style: [{ children: `body {background: red}` }],
         htmlAttrs: {
-          lang: 'en',
+          lang: "en",
         },
-        noscript: [{ children: 'This app requires javascript to work' }],
+        noscript: [{ children: "This app requires javascript to work" }],
         meta: [
           {
-            name: 'description',
-            content: 'desc',
+            name: "description",
+            content: "desc",
           },
           {
-            name: 'description',
-            content: 'desc 2',
+            name: "description",
+            content: "desc 2",
           },
           {
-            property: 'og:locale:alternate',
-            content: 'fr',
-            key: 'fr',
+            property: "og:locale:alternate",
+            content: "fr",
+            key: "fr",
           },
           {
-            property: 'og:locale:alternate',
-            content: 'zh',
-            key: 'zh',
+            property: "og:locale:alternate",
+            content: "zh",
+            key: "zh",
           },
         ],
         script: [
           {
             children: `console.log('hi')`,
-            body: true
+            body: true,
           },
         ],
       })
       return () => (
         <div>
           <h1>Home</h1>
-          <RouterLink to="/about">About</RouterLink>{' '}
+          <RouterLink to="/about">About</RouterLink>{" "}
           <RouterLink to="/contact">Contact</RouterLink>
           <hr />
           <button
             class="change-home-title"
-            onClick={() => (title.value = 'new title')}
+            onClick={() => (title.value = "new title")}
           >
             Change home title (not really)
           </button>
@@ -90,7 +90,7 @@ export const createApp = () => {
   const About = defineComponent({
     setup() {
       useHead({
-        title: 'About',
+        title: "About",
       })
       return () => (
         <div>
@@ -105,20 +105,20 @@ export const createApp = () => {
     history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
     routes: [
       {
-        path: '/',
+        path: "/",
         component: Home,
       },
       {
-        path: '/about',
+        path: "/about",
         component: About,
       },
       {
-        path: '/contact',
+        path: "/contact",
         component: Contact,
       },
       {
-        path: '/ssr/dedup',
-        component: () => import('./pages/ssr/dedup.vue'),
+        path: "/ssr/dedup",
+        component: () => import("./pages/ssr/dedup.vue"),
       },
     ],
   })
@@ -128,8 +128,8 @@ export const createApp = () => {
       useHead({
         meta: [
           {
-            name: 'global-meta',
-            content: 'some global meta tag',
+            name: "global-meta",
+            content: "some global meta tag",
           },
         ],
       })

diff --git a/example/main.tsx b/example/main.tsx
@@ -1,9 +1,9 @@
-import { createApp } from './app'
+import { createApp } from "./app"
 
 const { app, router, head } = createApp()
 
 router.isReady().then(() => {
-  app.mount('#app')
+  app.mount("#app")
 
   // @ts-expect-error
   window.head = head

diff --git a/example/pages/ssr/dedup.vue b/example/pages/ssr/dedup.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { useHead } from '../../../src'
+import { useHead } from "../../../src"
 
 useHead({
   style: [
     {
-      type: 'text/css',
-      id: 'darkStyle',
+      type: "text/css",
+      id: "darkStyle",
       children: `
         body {
           background-color: #000;

diff --git a/scripts/run-test.ts b/scripts/run-test.ts
@@ -1,9 +1,9 @@
-import execa from 'execa'
-import fetch from 'node-fetch'
+import execa from "execa"
+import fetch from "node-fetch"
 
 const args = process.argv.slice(2)
 
-const cmd = execa('npm', ['run', 'example'])
+const cmd = execa("npm", ["run", "example"])
 
 cmd.stdout!.pipe(process.stdout)
 cmd.stderr!.pipe(process.stderr)
@@ -13,10 +13,10 @@ const tryRun = () => {
     fetch(`http://localhost:3000`)
       .then((res) => {
         if (res.ok) {
-          const test = execa('npm', ['run', 'test:e2e', '--', ...args], {
-            stdio: 'inherit',
+          const test = execa("npm", ["run", "test:e2e", "--", ...args], {
+            stdio: "inherit",
           })
-          test.on('exit', (code) => {
+          test.on("exit", (code) => {
             process.exit(code || 0)
           })
         } else {

diff --git a/src/constants.ts b/src/constants.ts
@@ -3,6 +3,6 @@ export const HEAD_COUNT_KEY = `head:count`
 // Store attr names for `htmlAttrs`, `bodyAttrs` so we can remove them first before next update
 export const HEAD_ATTRS_KEY = `data-head-attrs`
 
-export const SELF_CLOSING_TAGS = ['meta', 'link', 'base']
+export const SELF_CLOSING_TAGS = ["meta", "link", "base"]
 
 export const BODY_TAG_ATTR_NAME = `data-meta-body`
diff --git a/src/create-element.ts b/src/create-element.ts
@@ -8,17 +8,17 @@ export const createElement = (
   const el = document.createElement(tag)
 
   for (const key of Object.keys(attrs)) {
-    if (key === 'body' && attrs.body === true) {
+    if (key === "body" && attrs.body === true) {
       // set meta-body attribute to add the tag before </body>
-      el.setAttribute(BODY_TAG_ATTR_NAME, 'true')
+      el.setAttribute(BODY_TAG_ATTR_NAME, "true")
     } else {
       let value = attrs[key]
 
-      if (key === 'key' || value === false) {
+      if (key === "key" || value === false) {
         continue
       }
 
-      if (key === 'children') {
+      if (key === "children") {
         el.textContent = value
       } else {
         el.setAttribute(key, value)
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ name: Release @@
     on:
       push:
         tags:
-          - 'v*'
+          - "v*"
     jobs:
       release:
@@ Expand Down @@