From 73686f521102d8e057ca15eeee932121410c4101 Mon Sep 17 00:00:00 2001
From: dyoshikawa <dyoshikawa1993@gmail.com>
Date: Wed, 19 Jan 2022 02:55:25 +0900
Subject: [PATCH] refactor

---
 README.md                               | 56 +++++++++++++++++--------
 packages/niseliff-sdk/src/index.ts      |  2 +-
 packages/sample-client-app/src/main.tsx |  4 +-
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 6717a8e..abdc959 100644
--- a/README.md
+++ b/README.md
@@ -21,15 +21,23 @@ npm i @niseline/niseliff
 Use NiseLiff sdk in your client app!
 
 ```tsx
-import { buildNiseLiff } from '@niseline/niseliff'
+import { buildNiseliff } from '@niseline/niseliff'
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-const niseliff = buildNiseLiff()
+declare global {
+  interface Window {
+    liff: Liff
+  }
+}
 
-niseliff
+window.liff = buildNiseliff({
+  liffId: 'DUMMY_LIFF_ID',
+})
+
+window.liff
   .init({
-    liffId: 'DEFAULT_LIFF_ID', // You can use any value
+    liffId: 'DUMMY_LIFF_ID',
   })
   .then(() => {
     ReactDOM.render(
@@ -49,23 +57,37 @@ npm i @niseline/niseliff
 
 ### Usage
 
+```ts
+// /path/to/config.ts
+
+export const env: 'local' | 'development' | 'staging' | 'production' = 'local'
+```
+
+```ts
+// /path/to/liff.ts
+
+import * as config from '/path/to/config'
+import realLiff from '@line/liff'
+import { buildNiseliff } from '@niseline/niseliff'
+
+const liff =
+  config.env === 'local' ? buildNiseliff({ liffId: 'DUMMY_LIFF_ID' }) : realLiff
+export default liff
+```
+
 ```tsx
-import { buildNiseLiff } from '@niseline/niseliff'
+// /path/to/index.tsx
+
+import liff from '/path/to/liff'
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-const niseliff = buildNiseLiff()
-
-niseliff
-  .init({
-    liffId: 'DEFAULT_LIFF_ID', // You can use any value
-  })
-  .then(() => {
-    ReactDOM.render(
-      <React.StrictMode>Your client app</React.StrictMode>,
-      document.getElementById('root')
-    )
-  })
+liff.init({ liffId: 'DUMMY_LIFF_ID' }).then(() => {
+  ReactDOM.render(
+    <React.StrictMode>Your client app</React.StrictMode>,
+    document.getElementById('root')
+  )
+})
 ```
 
 ### Features
diff --git a/packages/niseliff-sdk/src/index.ts b/packages/niseliff-sdk/src/index.ts
index b9d7c06..892a083 100644
--- a/packages/niseliff-sdk/src/index.ts
+++ b/packages/niseliff-sdk/src/index.ts
@@ -33,7 +33,7 @@ import { buildSendMessages } from './method/send-messages'
 import { buildShareTargetPicker } from './method/share-target-picker'
 import { ConsoleLogger, Logger } from './util/logger'
 
-export const buildNiseLiff = (params?: {
+export const buildNiseliff = (params?: {
   niseliffServerEndpoint?: string
   liffId?: string
   os?: 'ios' | 'android' | 'web' | undefined
diff --git a/packages/sample-client-app/src/main.tsx b/packages/sample-client-app/src/main.tsx
index ff0fb38..948d543 100644
--- a/packages/sample-client-app/src/main.tsx
+++ b/packages/sample-client-app/src/main.tsx
@@ -1,5 +1,5 @@
 import { Liff } from '@line/liff'
-import { buildNiseLiff } from '@niseline/niseliff'
+import { buildNiseliff } from '@niseline/niseliff'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { App } from './app'
@@ -11,7 +11,7 @@ declare global {
   }
 }
 
-window.liff = buildNiseLiff() as Liff
+window.liff = buildNiseliff() as Liff
 
 window.liff
   .init({