adds typescript support

benchmark-urbanism · Dec 27, 2022 · 76f3300 · 76f3300
1 parent b026ec1
commit 76f3300
Show file tree

Hide file tree

Showing 21 changed files with 12,388 additions and 6,127 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,13 +1,38 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
   root: true,
   env: {
     node: true,
   },
-  extends: ['plugin:prettier/recommended', 'plugin:vue/vue3-recommended'],
-  plugins: [],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended', // eslint-plugin-vue
+    'plugin:astro/recommended',
+    // last - to turn of clashes with prettier
+    'prettier', // eslint-config-prettier
+  ],
+  // for parsing vue <template>
+  parser: 'vue-eslint-parser',
+  // for parsing <script>
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+  },
+  // sorting imports and tailwind plugin
+  plugins: ['simple-import-sort', 'tailwindcss', '@typescript-eslint'],
+  // rules for enabling import sorting errors
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'vue/multi-word-component-names': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
   },
+  overrides: [
+    {
+      files: ['*.astro'],
+      parser: 'astro-eslint-parser',
+      rules: {},
+    },
+  ],
 }
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -10,24 +10,8 @@ jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Cache pnpm modules
-        uses: actions/cache@v2
-        with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-
-
-      - uses: pnpm/action-setup@v2.1.0
-        with:
-          version: 6.0.2
-          run_install: |
-            - recursive: true
-              args: [--frozen-lockfile, --strict-peer-dependencies]
-
-      - run: pnpm build
+      - uses: actions/checkout@v3
+      - run: npm install && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -8,25 +8,8 @@ jobs:
     if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Cache pnpm modules
-        uses: actions/cache@v2
-        with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-
-
-      - uses: pnpm/action-setup@v2.1.0
-        with:
-          version: 6.0.2
-          run_install: |
-            - recursive: true
-              args: [--frozen-lockfile, --strict-peer-dependencies]
-
-      - run: pnpm build
-
+      - uses: actions/checkout@v3
+      - run: npm install && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/publish_package.yml b/.github/workflows/publish_package.yml
@@ -6,21 +6,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
-      - uses: pnpm/action-setup@v2.1.0
-        with:
-          version: 6.0.2
-          run_install: |
-            - recursive: true
-
-      - run: pnpm run bundle
-
+      - uses: actions/checkout@v3
+      - run: npm install && npm run bundle
       - uses: actions/setup-node@v2
         with:
           registry-url: 'https://registry.npmjs.org'
           scope: '@benchmark-urbanism'
-
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
@@ -2,8 +2,20 @@ module.exports = {
   printWidth: 100,
   semi: false,
   singleQuote: true,
-  pugAttributeSeparator: 'none',
+  pugAttributeSeparator: 'as-needed',
   pugCommentPreserveSpaces: 'trim-all',
-  pugWrapAttributesThreshold: -1,
-  pugEmptyAttributes: 'as-is',
+  pugSortAttributes: 'asc',
+  pugWrapAttributesThreshold: 1,
+  pugFramework: 'vue',
+  pugEmptyAttributes: 'all',
+  pugClassLocation: 'after-attributes',
+  pugExplicitDiv: true,
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+  ],
 }
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
@@ -1,5 +1,10 @@
 module.exports = {
-  extends: ['stylelint-config-recommended-vue', 'stylelint-prettier/recommended'],
+  extends: [
+    'stylelint-config-standard',
+    // last - to turn of clashes with prettier
+    'stylelint-config-prettier',
+  ],
+  plugins: [],
   rules: {
     'selector-nested-pattern': '^&',
   },

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,35 +1,10 @@
+import mdx from '@astrojs/mdx'
+import prefetch from '@astrojs/prefetch'
 import sitemap from '@astrojs/sitemap'
 import tailwind from '@astrojs/tailwind'
 import vue from '@astrojs/vue'
 import { defineConfig } from 'astro/config'
-import { h, s } from 'hastscript'
-import { visit } from 'unist-util-visit'
-
-function admonitionRemarkPlugin() {
-  return (tree) => {
-    visit(tree, (node) => {
-      if (
-        node.type === 'textDirective' ||
-        node.type === 'leafDirective' ||
-        node.type === 'containerDirective'
-      ) {
-        if (node.name === 'note') {
-          const data = node.data || (node.data = {})
-          const tagName = node.type === 'textDirective' ? 'span' : 'div'
-          data.hName = tagName
-          data.hProperties = h(tagName, { class: 'box note' }).properties
-        } else if (node.name === 'warning') {
-          const data = node.data || (node.data = {})
-          const tagName = node.type === 'textDirective' ? 'span' : 'div'
-          data.hName = tagName
-          data.hProperties = h(tagName, { class: 'box warning' }).properties
-        } else {
-          return
-        }
-      }
-    })
-  }
-}
+import { s } from 'hastscript'
 
 export default defineConfig({
   root: '.',
@@ -51,7 +26,6 @@ export default defineConfig({
       wrap: true,
     },
     remarkPlugins: [
-      'remark-gfm',
       'remark-emoji',
       [
         'remark-smartypants',
@@ -60,7 +34,6 @@ export default defineConfig({
         },
       ],
       'remark-directive',
-      admonitionRemarkPlugin,
     ],
     rehypePlugins: [
       'rehype-slug',
@@ -106,5 +79,7 @@ export default defineConfig({
       },
     }),
     sitemap(),
+    prefetch(),
+    mdx(),
   ],
 })
diff --git a/docs/src/components/Demo.vue b/docs/src/components/Demo.vue
@@ -1,25 +1,25 @@
 <template lang="pug">
-.bg-dark-grey.py-3.rounded.border-mid-grey
-  .text-center
+div.bg-dark-grey.py-3.rounded.border-mid-grey
+  div.text-center
     div Scroll to see some map action!
-  #map-container
-  .flex.justify-center
-    .pair
-      .label Zoom:
-      .info {{ zoom.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
-    .pair
-      .label Pitch:
-      .info {{ pitch.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
-    .pair
-      .label Bearing:
-      .info {{ bearing.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
+  div#map-container
+  div.flex.justify-center
+    div.pair
+      div.label Zoom:
+      div.info {{ zoom.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
+    div.pair
+      div.label Pitch:
+      div.info {{ pitch.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
+    div.pair
+      div.label Bearing:
+      div.info {{ bearing.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
   VueMapboxMap(
-    :map='mapInstance'
-    :lng='scene.lng'
-    :lat='scene.lat'
+    :bearing='bearing',
+    :lat='scene.lat',
+    :lng='scene.lng',
+    :map='mapInstance',
+    :pitch='pitch',
     :zoom='zoom'
-    :pitch='pitch'
-    :bearing='bearing'
   )
 </template>
 
@@ -63,9 +63,9 @@ onMounted(() => {
 })
 </script>
 
-<style>
+<style lang="postcss">
 #map-container {
-  @apply my-3 w-full bg-theme h-[400px] min-h-[400px] max-h-[400px];
+  @apply my-3 h-[400px] max-h-[400px] min-h-[400px] w-full bg-theme;
 }
 .pair {
   @apply flex flex-initial px-2;

diff --git a/docs/src/components/RepoLink.vue b/docs/src/components/RepoLink.vue
@@ -1,9 +1,13 @@
 <template lang="pug">
 div
-  #repo-container
-    a#repo-link(:href='repoLink' :title='title' target='_blank')
+  div#repo-container
+    a#repo-link(
+      :href='repoLink',
+      :title='title'
+      target='_blank'
+    )
       Github#repo-logo
-      #repo-text {{ repoText }}
+      div#repo-text {{ repoText }}
 </template>
 
 <script setup>
@@ -31,7 +35,7 @@ const title = computed(() =>
   @apply my-4 flex items-center justify-center;
 }
 #repo-link {
-  @apply text-theme relative flex flex-col items-center justify-center;
+  @apply relative flex flex-col items-center justify-center text-theme;
 }
 #repo-logo {
   @apply h-20 w-20 transition-all;

diff --git a/docs/src/layouts/BaseLayout.astro b/docs/src/layouts/BaseLayout.astro
@@ -23,18 +23,16 @@ import '../styles/tailwind.css'
     <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
-      defer
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300&display=swap"
     />
     <link
-      defer
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;300;400;500;600;700&display=swap"
     />
     <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
   </head>
-  <body class="w-full h-full">
+  <body class="h-full w-full">
     <div class="app-container">
       <div class="app-content">
         <slot />
@@ -48,7 +46,7 @@ import '../styles/tailwind.css'
     @apply flex h-full min-h-screen w-full flex-col items-center;
   }
   .app-content {
-    @apply w-full flex max-w-5xl flex-col items-stretch py-10 px-3;
+    @apply flex w-full max-w-5xl flex-col items-stretch py-10 px-3;
   }
   @media only screen and (max-width: 820px) {
     .app-content {

diff --git a/docs/src/pages/index.md → docs/src/pages/index.mdx b/docs/src/pages/index.md → docs/src/pages/index.mdx
@@ -1,37 +1,32 @@
 ---
 layout: ../layouts/BaseLayout.astro
-setup: |
-  import RepoLink from '../components/RepoLink.vue'
-  import Demo from '../components/Demo.vue'
 ---
 
+import RepoLink from '../components/RepoLink.vue'
+import Demo from '../components/Demo.vue'
+
 <RepoLink
-repoLink='https://github.com/benchmark-urbanism/vue-mapbox-map'
-repoText='vue-mapbox-map'/>
+  repoLink="https://github.com/benchmark-urbanism/vue-mapbox-map"
+  repoText="vue-mapbox-map"
+/>
 
 # VueMapboxMap
 
 A minimalist [Vue](https://vuejs.org/) component wrapping [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) or [MapLibre GL](https://github.com/maplibre/maplibre-gl-js) for dynamic maps.
 
 In the spirit of keeping things light and not reinventing the wheel: this component wraps only what is necessary for dynamic updates. Use the map instance directly otherwise.
 
-:::warning
-`v1.0.0^` has been refactored for Vue 3. Use the previous `v0.14.11` version for Vue 2 projects.
-:::
+> `v1.0.0^` has been refactored for Vue 3. Use the previous `v0.14.11` version for Vue 2 projects.
 
-:::note
-See the complementary [vue-mapbox-feature](https://vue-mapbox-feature.web.app) repo for dynamic geoJSON features.
-:::
+> See the complementary [vue-mapbox-feature](https://vue-mapbox-feature.web.app) repo for dynamic geoJSON features.
 
 ## Demo
 
 <Demo client:only />
 
 ## Setup
 
-:::note
-See the documentation's [demo](https://github.com/benchmark-urbanism/vue-mapbox-map/blob/master/docs/src/components/Demo.vue) component for a complete example.
-:::
+> See the documentation's [demo](https://github.com/benchmark-urbanism/vue-mapbox-map/blob/master/docs/src/components/Demo.vue) component for a complete example.
 
 Install via `yarn` or `npm`: