Jul. 2023 ​

3 rd ​

套件 ​

• UploadThing

  將檔案上傳功能加入您的全端 TypeScript 應用程式最簡單的方式。

工具 ​

• Taze

  現代的 cli 工具。

  1. 內建對於 monorepos 的支援
  2. 無需安裝
  3. 更新在被允許的版本範圍內

7 th ​

CSS ​

• Custom Cursor

  盡量用 ico 格式，有些瀏覽器不接受 ani，且儘量使用 32 * 32 為主。
  也可以寫這樣：

  css

  cursor: url('圖片路徑.ani'), url('圖片路徑.ico'), auto;

  1
  

  若無法使用 ani，會往下一個 ico，就算都無法使用也會套用到瀏覽器預設（auto）。

套件 ​

• whyframe

  可以在 iframe 中渲染任何 UI 框架的標記，包括 Svelte、Vue、Solid、Preact 和 React。

  html

  <iframe data-why>
    Hello world!
  </iframe>

  1
  2
  3
  

  可能會用到的使用情形：

  1. 建立 Component Library 的文件，展示獨立的用法範例。
  2. 撰寫一篇文章，展示靜態的獨立示例。
  3. 構建一個 Storybook / Histoire Clone 版本。

• Vue.Draggable

  基於 Sortable.js 的 Vue3 拖曳元件。

9 th ​

Vue ​

• defineComponent

  沒有實現任何邏輯，只是把接收的 Object 直接回傳。
  目的是讓傳入的整個物件獲得對應的型別（正確推斷 setup() 的參數型別）。

• defineExpose

  可以指定在 <script setup> 組件中明確要暴露出去的屬性。

  • 子組件

  vue

  <script setup>
  const msg = 'example'
  
  defineExpose({
    msg
  })
  </script>

  1
  2
  3
  4
  5
  6
  7
  

  • 父組件

  vue

  <script setup>
  import Child from '...'
  
  const msgFromChild = ref(null)
  
  console.log(msgFromChild.value.msg) // null
  
  watch(msgFromChild, () => {
    console.log(msgFromChild.value.msg) // 'example'
  })
  </script>
  
  <template>
    <Child ref="msgFromChild" />
  </template>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  

11 st ​

Corepack ​

Node.js v16.15.1 以上版本才有提供 corepack 指令。
Node.js 預設提供 npm 包管理器，而 Corepack 提供 Yarn 和 pnpm，無需自行安裝。

corepack enable

啟用 corepack，安裝 yarn 和 pnpm。

⋯ Reference

12 nd ​

套件 ​

• Vue Class Component

  使用 Class-Style 語法來製作 Vue Component 的函式庫。
  在 Vue3 中，不再建議使用基於 Class 的 Component，建議使用 SFC、Composition API 和 <script setup> 來使用 Vue3。

• vue-functional-ref

  Vue 的函數式 ref／Computed。

13 rd ​

Vue 3.3 ​

• Imported and Complex Types

  原本 defineProps 和 defineEmits 的型別參數位置中使用的型別僅限於本地型別，並且僅支援 Type Literals 和 interfaces。
  Vue3.3 後可以解析匯入的型別，並支援一組有限的複雜型別。

  vue

  <script setup lang="ts">
  import type { Props } from './foo'
  
  defineProps<
    Props & { extraProp?: string }
  >()
  </script>

  1
  2
  3
  4
  5
  6
  7
  

• Generic Components（new）

  Component 可以透過 generic 屬性接受泛型型別參數。

  vue

  <script setup lang="ts" generic="T">
  defineProps<{
    items: T[]
    selected: T
  }>()
  </script>

  1
  2
  3
  4
  5
  6
  

• defineEmits

  • Before

  javascript

  const emit = defineEmits<{
    (e: 'foo', id: number): void
    (e: 'bar', name: string, ...rest: any[]): void
  }>()

  1
  2
  3
  4
  

  • After

  javascript

  const emit = defineEmits<{
    foo: [id: number]
    bar: [name: string, ...rest: any[]]
  }>()

  1
  2
  3
  4
  

• defineSlots（new）

  可以宣告預期的 Slots 以及各別預期的 Slot Props。 僅接受型別參數，且不接受 runtime 參數。

  vue

  <script setup lang="ts">
  defineSlots<{
    default?: (props: { msg: string }) => any
    item?: (props: { id: number }) => any
  }>()
  </script>

  1
  2
  3
  4
  5
  6
  

• defineOptions（new）

  defineOptions 允許在 <script setup> 中直接宣告 Component Options，無需額外的 <script> 區塊。

  vue

  <script setup>
  defineOptions({ })
  </script>

  1
  2
  3
  

• toRef／toValue

  toRef 支援將一般值、getter 函數或現有的 ref 轉換成 ref。
  toValue 則提供相反的功能，將一般值、getter 函數或 ref 轉換成一般值。
  在 Composables 中，可以使用 toValue 來取代 unref，這樣即可接受 getter 函數作為響應式的傳入資料。

• Reactive Props Destructure（Experimental）

  允許解構的屬性保有響應性，並提供了一種更方便的方式來聲明屬性的預設值。

  vue

  <script setup>
  import { watchEffect } from 'vue'
  
  const { msg = 'hello' } = defineProps(['msg'])
  
  watchEffect(() => {
    console.log(`msg is: ${msg}`)
  })
  </script>
  
  <template>{{ msg }}</template>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  

• defineModel（Experimental）

  原本使 Component 支援與 v-model 的雙向綁定需要宣告一個 prop，並當需要更新該 prop 時發出對應的 update:propName Event。
  而 defineModel 簡化將自動註冊一個 prop，並回傳一個可以直接修改的 ref。

  vue

  <script setup>
  const modelValue = defineModel()
  console.log(modelValue.value)
  </script>
  
  <template>
    <input v-model="modelValue" />
  </template>

  1
  2
  3
  4
  5
  6
  7
  8
  

⋯ Reference

17 th ​

套件 ​

• ni

  輔助選擇正確的 Package Manager。

  ni
  
  # npm install
  # yarn install
  # pnpm install
  # bun install

  1
  2
  3
  4
  5
  6
  

工具 ​

• fnm

  Node.js Version Manager。
  

19 th ​

套件 ​

• result

  1. 小型、慣用的 API：
     混合使用 Rust 的 Result 和 Haskell 的 Either 型別的部分特性，修改它們以使其符合 TypeScript。
  2. 程式碼錯誤應該拋出：
     Result#map 和 Result#chain 在某種程度上類似於 Promise#then，不同之處在於它們不會隱式地包裝在 Callback Function 中拋出的錯誤。
  3. 符合人體工學但安全：
     充分利用 TypeScript 的型別推斷，使常見情況變得簡單，同時保持型別安全性。

資源 ​

• iconoir

  開源 Icon Library，支援 React、React Native、Flutter、CSS、Figma 和 Framer。

20 th ​

套件 ​

• sucrase

  針對 JS runtime，Babel 的超快速替代方案。

• tsup

  無需配置即可打包 TypeScript Library，由 esbuild 提供支援。
  提供打包 Node.js 原生支援的任何內容（.js、.json、.mjs、.ts、.tsx）

• alova

  Vue.js、React.js 和 Svelte.js 等 MVVM Library 的 Request strategy library。
  輕量級的 Request 函式庫，根據不同的 Request 情境，提供針對性的 Request 策略以提高應用程式的流暢性和可用性，減輕伺服器的壓力。

22 nd ​

函式庫 ​

• idux

  針對中後台產品的 UI 元件庫，基於 Vue3 和 TypeScript 開發。

工具 ​

• arethetypeswrong

  用於分析 npm packages 的 TypeScript 型別的工具，特別是與 ESM 相關的模組解析問題。
  可以透過網站或命令列界面來探尋這些套件。

套件 ​

• vite-plugin-dts

  用於 Vite 的套件，當在 Library Mode 下使用 Vite 時，它會從 .ts(x) 或 .vue 的檔案生成聲明文件 *.d.ts。

24 th ​

Vite ​

• 使用 Proxy 解決 CORS 問題

  javascript

  export default defineConfig({
    server: {
      proxy: 'http://localhost:port'
    }
  })

  1
  2
  3
  4
  5
  

• Build 時去除 console／debugger

  javascript

  export default defineConfig({
      esbuild: {
        drop: ['console', 'debugger'],
      }
  })

  1
  2
  3
  4
  5
  

27 th ​

套件 ​

• notivue

  適用於 Vue 和 Nuxt 的全功能 Toast 通知系統。

• ArrowJS

  無框架的響應性。

29 th ​

工具 ​

• unimport

  用於在 modules 中自動 import APIs 的統一實用工具，用於 nuxt 和 unplugin-auto-import。

函式庫 ​

• @vueuse/gesture

  兼容 Vue2、Vue3 以及 Nuxt，為一組 Vue Composables。
  目的在透過 pointer 和 touch 手勢支援，幫助 Vue 應用程序更具有互動性。

• @vueuse/motion

  讓 component 實現動畫。

30 th ​

參考 ​

• visualization-collection

  專注於前端視覺效果的集合應用，包含 CSS 動畫特效、Canvas 動畫、人工智慧應用等。

工具 ​

• Quado

  提供完全托管的 FIDO 認證 SaaS。
  使開發人員能夠在不必成為 FIDO 專家的情況下將 FIDO 認證引入其應用程序中。

• aglio

  一個支援多個主題並輸出靜態 HTML 的 API Blueprint 渲染器。
  API Blueprint 是一種基於 Markdown 的文件格式，以簡單明瞭的方式撰寫 API 描述和文件。