Handle mini and mini_preview query to show mini features

Author: kazuma0129

src/App.tsx

@@ -7,12 +7,14 @@ import Input from './components/Input'
 import { FilterContext, FilterType } from './Context'
 import qrCode from './qr-code.png'
 import { SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST } from './constants'
+import { FilterTypes } from './FilterTypes'
 
 type Props = {
-  filter: FilterType;
-};
+  appUrl: string
+  filter: FilterType
+}
 
-function App({ filter }: Props) {
+function App({ appUrl, filter }: Props) {
   let isLoggedIn = false
   try {
     isLoggedIn = liff.isLoggedIn()
@@ -24,10 +26,7 @@ function App({ filter }: Props) {
       <Header />
       <div className={styles.container}>
         <div className={styles.liffIdBox}>
-          <Input
-            readonly
-            value={`LIFF URL: https://liff.line.me/${import.meta.env.VITE_LIFF_ID.toString()}`}
-          />
+          <Input readonly value={`URL: ${appUrl}`} />
           <img src={qrCode} className={styles.qrCode} />
         </div>
         <h1>Client APIs</h1>

src/FilterTypes.ts

@@ -1,4 +1,5 @@
 export const FilterTypes = {
   LIFF: 'LIFF',
-  MINI: 'MINI'
+  MINI: 'MINI',
+  MINI_PREVIEW: 'MINI_PREVIEW'
 } as const

src/main.tsx

@@ -1,20 +1,45 @@
 import liff from '@line/liff'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { LiffCommonProfilePlugin } from '@line/liff-common-profile-plugin'
 import './main.css'
 import App from './App'
 import { FilterTypes } from './FilterTypes'
 
 const isMINI = new URLSearchParams(location.search).has('mini')
-const filter = isMINI ? FilterTypes.MINI : FilterTypes.LIFF
-const liffId = isMINI ? import.meta.env.VITE_LIFF_ID_MINI : import.meta.env.VITE_LIFF_ID
+const isPreviewMINI = new URLSearchParams(location.search).has('mini_preview')
+
+const filter = isPreviewMINI
+  ? FilterTypes.MINI_PREVIEW
+  : isMINI
+  ? FilterTypes.MINI
+  : FilterTypes.LIFF
+
+const appId = {
+  [FilterTypes.LIFF]: import.meta.env.VITE_LIFF_ID,
+  [FilterTypes.MINI]: import.meta.env.VITE_LIFF_ID_MINI,
+  [FilterTypes.MINI_PREVIEW]: import.meta.env.VITE_LIFF_ID_MINI_PREVIEW
+}[filter]
+
+const appUrl =
+  filter === FilterTypes.LIFF
+    ? `https://liff.line.me/${appId}`
+    : `https://miniapp.line.me/${appId}`
+
+const injectPlugins = () => {
+  liff.use(new LiffCommonProfilePlugin())
+}
+
+if (filter === FilterTypes.MINI || filter === FilterTypes.MINI_PREVIEW) {
+  injectPlugins()
+}
 
 liff
-  .init({ liffId })
+  .init({ liffId: appId })
   .then(() => {
     ReactDOM.render(
       <React.StrictMode>
-        <App filter={filter} />
+        <App appUrl={appUrl} filter={filter} />
       </React.StrictMode>,
       document.getElementById('root')
     )