@machinat/create-app - npm Package Compare versions

Comparing version 0.6.0-canary.2 to 0.6.0-canary.3

lib/cli.js

@@ -21,3 +21,3 @@ #!/usr/bin/env node
 Example
-  $ create-machinat-app -p messenger -p webview
+  $ create-machinat-app -p messenger --webview
 `, {
@@ -35,2 +35,7 @@ flags: {
         },
+        webview: {
+            type: 'boolean',
+            alias: 'w',
+            default: false,
+        },
         recognizer: {
@@ -52,9 +57,10 @@ type: 'string',
 const projectPath = (0, path_1.resolve)(projectInput);
-const { recognizer, npmTag, platform: platforms } = cli.flags;
+const { recognizer, npmTag, platform: platforms, webview: withWebview, } = cli.flags;
 (0, createApp_1.default)({
-    platforms,
+    platforms: platforms,
     projectPath,
     recognizer,
+    withWebview,
     npmTag,
 }).then((code) => process.exit(code));
 //# sourceMappingURL=cli.js.map

lib/createApp.d.ts

@@ -0,8 +1,10 @@
+import type { PlatformType } from './types';
 declare type CreateAppOptions = {
-    platforms: string[];
+    platforms: PlatformType[];
     projectPath: string;
     recognizer: string;
+    withWebview: boolean;
     npmTag?: string;
 };
-declare const createMachinatApp: ({ platforms, projectPath, recognizer, npmTag, }: CreateAppOptions) => Promise<number>;
+declare const createMachinatApp: ({ platforms, projectPath, recognizer, withWebview, npmTag, }: CreateAppOptions) => Promise<number>;
 export default createMachinatApp;

lib/createApp.js

@@ -35,4 +35,4 @@ "use strict";
 const formatCode = (code, parser) => (0, prettier_1.format)(code, { parser, singleQuote: true });
-const supportedPlatforms = ['messenger', 'telegram', 'line', 'webview'];
-const createMachinatApp = async ({ platforms, projectPath, recognizer, npmTag = 'latest', }) => {
+const supportedPlatforms = ['messenger', 'twitter', 'telegram', 'line'];
+const createMachinatApp = async ({ platforms, projectPath, recognizer, withWebview, npmTag = 'latest', }) => {
     console.log(`Create a ${chalk_1.default.yellow('Machinat')} app in ${chalk_1.default.green(projectPath)}...\n`);
@@ -43,3 +43,5 @@ const projectName = (0, path_1.basename)(projectPath);
         if (!supportedPlatforms.includes(platform)) {
-            console.log(`${chalk_1.default.redBright('Error:')} "${platform}" is not a supported platform, only 'messenger', 'telegram', 'line', and 'webview' are supported now`);
+            console.log(`${chalk_1.default.redBright('Error:')} '${platform}' is not a supported platform, only ${supportedPlatforms
+                .map((p) => `'${p}'`)
+                .join(', ')} are supported now`);
             return 1;
@@ -56,2 +58,3 @@ }
         recognizer,
+        withWebview,
     };
@@ -70,3 +73,6 @@ if ((0, fs_1.existsSync)(projectPath)) {
         const content = (0, utils_1.polishFileContent)(buildContent(context));
-        if ((content || binary) && !(0, fs_1.existsSync)(targetDir)) {
+        if (!content) {
+            return;
+        }
+        if (!(0, fs_1.existsSync)(targetDir)) {
             await thenifiedly_1.default.call(fs_1.mkdir, targetDir, { recursive: true });
@@ -77,3 +83,3 @@ }
         }
-        else if (content) {
+        else if (typeof content === 'string') {
             const ext = (0, path_1.extname)(targetPath);
@@ -99,4 +105,5 @@ await thenifiedly_1.default.call(fs_1.writeFile, targetPath, ext === '.ts' || ext === '.tsx'
         '@machinat/script',
-        platforms.includes('webview') ? '@machinat/webview' : undefined,
+        withWebview ? '@machinat/webview' : undefined,
         platforms.includes('messenger') ? '@machinat/messenger' : undefined,
+        platforms.includes('twitter') ? '@machinat/twitter' : undefined,
         platforms.includes('telegram') ? '@machinat/telegram' : undefined,
@@ -103,0 +110,0 @@ platforms.includes('line') ? '@machinat/line' : undefined,

lib/template/dotEnv.example.t.d.ts

 import type { CreateAppContext } from '../types';
 export declare const name = ".env.example";
-declare const _default: ({ platforms, recognizer }: CreateAppContext) => string;
+declare const _default: ({ platforms, recognizer, withWebview, }: CreateAppContext) => string;
 export default _default;

lib/template/dotEnv.example.t.js

@@ -6,4 +6,4 @@ "use strict";
 exports.name = '.env.example';
-exports.default = ({ platforms, recognizer }) => `
-# NOTICE! This file is an example for reference.
+exports.default = ({ platforms, recognizer, withWebview, }) => `
+# NOTICE! This file is for reference only.
 # DO NOT save any secret data here!
@@ -53,2 +53,37 @@ # The real settings should go to \`.env\` file.
 MESSENGER_VERIFY_TOKEN= <random secret string>
+`}${(0, utils_1.when)(platforms.includes('twitter')) `
+
+# Twitter Settings
+#   Follow the first 2 sections of this official guide:
+#     https://developer.twitter.com/en/docs/twitter-api/premium/account-activity-api/guides/getting-started-with-webhooks
+#   You'll create a Twitter app and set up the Account Activity API.
+#   Then you can get the following information in the developer portal.
+
+# app id, available at:
+#   App Page > Settings > APP ID
+TWITTER_APP_ID= 123456789
+
+# app key, available at:
+#   App Page > Keys and tokens > Consumer Keys > API Key and Secret
+TWITTER_APP_KEY= Aa1Bb2Cc3Dd4Ee5Ff6Gg
+
+# app secret, available at:
+#   App Page > Keys and tokens > Consumer Keys > API Key and Secret
+TWITTER_APP_SECRET= Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0
+
+# app bearer token, available at:
+#   App Page > Keys and tokens > Authentication Tokens > Bearer Token
+TWITTER_BEARER_TOKEN= AAAAAAAAAAAAAAAAAAAAAa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0
+
+# user access token, available at:
+#   App Page > Keys and tokens > Authentication Tokens > Authentication Tokens
+TWITTER_ACCESS_TOKEN= 09876543210123456789-Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0
+
+# user access token secret, available at:
+#   App Page > Keys and tokens > Authentication Tokens > Authentication Tokens
+TWITTER_ACCESS_SECRET= Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0Kk1Ll2Mm3Nn4Oo5Pp6
+
+# env label for account activity API, available at:
+#   Products > Premium > Dev Environments > Account Activity API
+TWITTER_WEBHOOK_ENV= default
 `}${(0, utils_1.when)(platforms.includes('telegram')) `
@@ -87,3 +122,3 @@
 LINE_LIFF_ID= 1234567890-abcd1234
-`}${(0, utils_1.when)(platforms.includes('webview')) `
+`}${(0, utils_1.when)(withWebview) `
 
@@ -90,0 +125,0 @@ # Webview Settings

lib/template/dotEnv.t.d.ts

 import type { CreateAppContext } from '../types';
 export declare const name = ".env";
-declare const _default: ({ platforms, recognizer }: CreateAppContext) => string;
+declare const _default: ({ platforms, recognizer, withWebview, }: CreateAppContext) => string;
 export default _default;

lib/template/dotEnv.t.js

@@ -11,3 +11,3 @@ "use strict";
 exports.name = '.env';
-exports.default = ({ platforms, recognizer }) => {
+exports.default = ({ platforms, recognizer, withWebview, }) => {
     const localTunnelSubDomain = (0, project_name_generator_1.default)({ number: true }).dashed;
@@ -29,2 +29,12 @@ return `
 MESSENGER_VERIFY_TOKEN=${(0, nanoid_1.nanoid)(16)}
+`}${(0, utils_1.when)(platforms.includes('twitter')) `
+# Twitter
+
+TWITTER_APP_ID=
+TWITTER_APP_KEY=
+TWITTER_APP_SECRET=
+TWITTER_BEARER_TOKEN=
+TWITTER_ACCESS_TOKEN=
+TWITTER_ACCESS_SECRET=
+TWITTER_WEBHOOK_ENV= default
 `}${(0, utils_1.when)(platforms.includes('telegram')) `
@@ -42,5 +52,5 @@ # Telegram
 LINE_ACCESS_TOKEN=
-LINE_CHANNEL_SECRET=${(0, utils_1.when)(platforms.includes('webview')) `
+LINE_CHANNEL_SECRET=${(0, utils_1.when)(withWebview) `
 LINE_LIFF_ID=`}
-`}${(0, utils_1.when)(platforms.includes('webview')) `
+`}${(0, utils_1.when)(withWebview) `
 # Webview
@@ -47,0 +57,0 @@

lib/template/package.json.t.d.ts

 import { CreateAppContext } from '../types';
-declare const _default: ({ projectName, platforms }: CreateAppContext) => string;
+declare const _default: ({ projectName, platforms, withWebview, }: CreateAppContext) => string;
 export default _default;

lib/template/package.json.t.js

@@ -8,3 +8,3 @@ "use strict";
 const utils_1 = require("../utils");
-exports.default = ({ projectName, platforms }) => {
+exports.default = ({ projectName, platforms, withWebview, }) => {
     const packageConfigs = {
@@ -18,5 +18,5 @@ name: projectName,
             'migrate:production': 'node ./lib/cli/migrate.js',
-            build: `npm run clean && npm run build:src${(0, utils_1.when)(platforms.includes('webview')) ` && npm run build:webview`}`,
+            build: `npm run clean && npm run build:src${(0, utils_1.when)(withWebview) ` && npm run build:webview`}`,
             'build:src': 'tsc',
-            'build:webview': platforms.includes('webview')
+            'build:webview': withWebview
                 ? 'dotenv -- next build ./webview'
@@ -43,3 +43,3 @@ : undefined,
     };
-    if (platforms.includes('webview')) {
+    if (withWebview) {
         packageConfigs.dependencies = Object.assign(Object.assign({}, packageConfigs.dependencies), {
@@ -52,4 +52,11 @@ next: '^12.0.8',
     }
+    if (platforms.includes('twitter')) {
+        packageConfigs.scripts = Object.assign(Object.assign({}, packageConfigs.scripts), {
+            activateTwitterWebhook: 'per-env',
+            'activateTwitterWebhook:development': 'dotenv -- ts-node ./src/cli/activateTwitterWebhook.ts',
+            'activateTwitterWebhook:production': 'node ./lib/cli/activateTwitterWebhook.js',
+        });
+    }
     return JSON.stringify((0, sort_package_json_1.default)(packageConfigs), null, 2);
 };
 //# sourceMappingURL=package.json.t.js.map

lib/template/src/app.ts.t.d.ts

 import { CreateAppContext } from '../../types';
-declare const _default: ({ platforms, recognizer }: CreateAppContext) => string;
+declare const _default: ({ platforms, recognizer, projectName, withWebview, }: CreateAppContext) => string;
 export default _default;

lib/template/src/app.ts.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils");
-exports.default = ({ platforms, recognizer }) => `
+exports.default = ({ platforms, recognizer, projectName, withWebview, }) => `
 import Machinat from '@machinat/core';
 import Http from '@machinat/http';${(0, utils_1.when)(platforms.includes('messenger')) `
-import Messenger from '@machinat/messenger';${(0, utils_1.when)(platforms.includes('webview')) `
+import Messenger from '@machinat/messenger';${(0, utils_1.when)(withWebview) `
 import MessengerWebviewAuth from '@machinat/messenger/webview';`}`}${(0, utils_1.when)(platforms.includes('line')) `
-import Line from '@machinat/line';${(0, utils_1.when)(platforms.includes('webview')) `
-import LineWebviewAuth from '@machinat/line/webview';`}`}${(0, utils_1.when)(platforms.includes('telegram')) `
-import Telegram from '@machinat/telegram';${(0, utils_1.when)(platforms.includes('webview')) `
-import TelegramWebviewAuth from '@machinat/telegram/webview';`}`}${(0, utils_1.when)(platforms.includes('webview')) `
+import Line from '@machinat/line';${(0, utils_1.when)(withWebview) `
+import LineWebviewAuth from '@machinat/line/webview';`}`}${(0, utils_1.when)(platforms.includes('twitter')) `
+import Twitter from '@machinat/twitter';
+import TwitterAssetManager from '@machinat/twitter/asset';${(0, utils_1.when)(withWebview) `
+import TwitterWebviewAuth from '@machinat/twitter/webview';`}`}${(0, utils_1.when)(platforms.includes('telegram')) `
+import Telegram from '@machinat/telegram';${(0, utils_1.when)(withWebview) `
+import TelegramWebviewAuth from '@machinat/telegram/webview';`}`}${(0, utils_1.when)(withWebview) `
 import Webview from '@machinat/webview';`}
@@ -20,7 +23,3 @@ import Script from '@machinat/script';
 } from '@machinat/dev-tools';${(0, utils_1.when)(recognizer === 'dialogflow') `
-import Dialogflow from '@machinat/dialogflow';`}${(0, utils_1.when)(platforms.includes('webview')) `
-import {
-  ServerDomain,${(0, utils_1.when)(platforms.includes('line')) `
-  LineLiffId,`}
-} from './interface';
+import Dialogflow from '@machinat/dialogflow';`}${(0, utils_1.when)(withWebview) `
 import nextConfigs from '../webview/next.config.js';`}
@@ -34,3 +33,3 @@ import useIntent from './services/useIntent';
   NODE_ENV,
-  PORT,${(0, utils_1.when)(platforms.includes('webview')) `
+  PORT,${(0, utils_1.when)(withWebview) `
   DOMAIN,
@@ -43,4 +42,12 @@ // webview
   MESSENGER_APP_SECRET,
-  MESSENGER_VERIFY_TOKEN,`}${(0, utils_1.when)(platforms.includes('telegram')) `
+  MESSENGER_VERIFY_TOKEN,`}${(0, utils_1.when)(platforms.includes('twitter')) `
+  // twitter
+  TWITTER_APP_ID,
+  TWITTER_APP_KEY,
+  TWITTER_APP_SECRET,
+  TWITTER_BEARER_TOKEN,
+  TWITTER_ACCESS_TOKEN,
+  TWITTER_ACCESS_SECRET,`}${(0, utils_1.when)(platforms.includes('telegram')) `
   // telegram
+  TELEGRAM_BOT_NAME,
   TELEGRAM_BOT_TOKEN,
@@ -52,3 +59,3 @@ TELEGRAM_SECRET_PATH,`}${(0, utils_1.when)(platforms.includes('line')) `
   LINE_ACCESS_TOKEN,
-  LINE_CHANNEL_SECRET,${(0, utils_1.when)(platforms.includes('webview')) `
+  LINE_CHANNEL_SECRET,${(0, utils_1.when)(withWebview) `
   LINE_LIFF_ID,`}`}
@@ -103,6 +110,16 @@ // redis
         webhookPath: '/webhook/messenger',
-        pageId: Number(MESSENGER_PAGE_ID),
+        pageId: MESSENGER_PAGE_ID,
         appSecret: MESSENGER_APP_SECRET,
         accessToken: MESSENGER_ACCESS_TOKEN,
         verifyToken: MESSENGER_VERIFY_TOKEN,
+      }),`}${(0, utils_1.when)(platforms.includes('twitter')) `
+
+      Twitter.initModule({
+        webhookPath: '/webhook/twitter',
+        appId: TWITTER_APP_ID,
+        appKey: TWITTER_APP_KEY,
+        appSecret: TWITTER_APP_SECRET,
+        bearerToken: TWITTER_BEARER_TOKEN,
+        accessToken: TWITTER_ACCESS_TOKEN,
+        accessSecret: TWITTER_ACCESS_SECRET,
       }),`}${(0, utils_1.when)(platforms.includes('telegram')) `
@@ -112,2 +129,3 @@
         webhookPath: '/webhook/telegram',
+        botName: TELEGRAM_BOT_NAME,
         botToken: TELEGRAM_BOT_TOKEN,
@@ -122,5 +140,5 @@ secretPath: TELEGRAM_SECRET_PATH,
         accessToken: LINE_ACCESS_TOKEN,
-        channelSecret: LINE_CHANNEL_SECRET,${(0, utils_1.when)(platforms.includes('webview')) `
-        liffChannelIds: [LINE_LIFF_ID.split('-')[0]],`}
-      }),`}${(0, utils_1.when)(platforms.includes('webview')) `
+        channelSecret: LINE_CHANNEL_SECRET,${(0, utils_1.when)(withWebview) `
+        liffId: LINE_LIFF_ID,`}
+      }),`}${(0, utils_1.when)(withWebview) `
 
@@ -136,7 +154,8 @@ Webview.initModule<${(0, utils_1.when)(platforms.includes('messenger')) `
         authPlatforms: [${(0, utils_1.when)(platforms.includes('messenger')) `
-          MessengerWebviewAuth,`}${(0, utils_1.when)(platforms.includes('telegram')) `
+          MessengerWebviewAuth,`}${(0, utils_1.when)(platforms.includes('twitter')) `
+          TwitterWebviewAuth,`}${(0, utils_1.when)(platforms.includes('telegram')) `
           TelegramWebviewAuth,`}${(0, utils_1.when)(platforms.includes('line')) `
           LineWebviewAuth,`}
         ],${(0, utils_1.when)(platforms.includes('messenger')) `
-        sameSite: 'none',`}
+        cookieSameSite: 'none',`}
         noNextServer: options?.noServer,
@@ -148,2 +167,9 @@ nextServerOptions: {
         },
+        basicAuth: {
+          appName: '${projectName
+    .split(/[-_\s]+/)
+    .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+    .join(' ')}',
+          appImageUrl: 'https://machinat.com/img/logo.jpg',
+        },
       }),`}
@@ -154,5 +180,4 @@ ],
       useIntent,
-      useUserProfile,${(0, utils_1.when)(platforms.includes('webview')) `
-      { provide: ServerDomain, withValue: DOMAIN },${(0, utils_1.when)(platforms.includes('line')) `
-      { provide: LineLiffId, withValue: LINE_LIFF_ID },`}`}
+      useUserProfile,${(0, utils_1.when)(platforms.includes('twitter')) `
+      TwitterAssetManager,`}
     ],
@@ -159,0 +184,0 @@ });

lib/template/src/components/WithMenu.tsx.t.d.ts

 import { CreateAppContext } from '../../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ platforms, withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/src/components/WithMenu.tsx.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../../utils");
-exports.default = ({ platforms }) => `
-import Machinat, {
-  MachinatNode,${(0, utils_1.when)(platforms.includes('webview')) `
-  makeContainer,`}
-} from '@machinat/core';${(0, utils_1.when)(platforms.includes('messenger')) `
-import * as Messenger from '@machinat/messenger/components';`}${(0, utils_1.when)(platforms.includes('telegram')) `
-import * as Telegram from '@machinat/telegram/components';`}${(0, utils_1.when)(platforms.includes('line')) `
-import * as Line from '@machinat/line/components';`}${(0, utils_1.when)(platforms.includes('webview')) `
-import {
-  ServerDomain,${(0, utils_1.when)(platforms.includes('line')) `
-  LineLiffId,`}
-} from '../interface';`}
+exports.default = ({ platforms, withWebview }) => `
+import Machinat, { MachinatNode } from '@machinat/core';${(0, utils_1.when)(platforms.includes('messenger')) `
+import * as Messenger from '@machinat/messenger/components';${(0, utils_1.when)(withWebview) `
+import { WebviewButton as MessengerWebviewButton } from '@machinat/messenger/webview';`}`}${(0, utils_1.when)(platforms.includes('twitter')) `
+import * as Twitter from '@machinat/twitter/components';${(0, utils_1.when)(withWebview) `
+import { WebviewButton as TwitterWebviewButton } from '@machinat/twitter/webview';`}`}${(0, utils_1.when)(platforms.includes('telegram')) `
+import * as Telegram from '@machinat/telegram/components';${(0, utils_1.when)(withWebview) `
+import { WebviewButton as TelegramWebviewButton } from '@machinat/telegram/webview';`}`}${(0, utils_1.when)(platforms.includes('line')) `
+import * as Line from '@machinat/line/components';${(0, utils_1.when)(withWebview) `
+import { WebviewAction as LineWebviewAction } from '@machinat/line/webview';`}`}
 
@@ -21,89 +19,76 @@ type WithMenuProps = {
 
-const WithMenu =${(0, utils_1.when)(platforms.includes('webview')) `
-  (domain: string${(0, utils_1.when)(platforms.includes('line')) `, lineLiffId: string`}) =>`}
-  ({ children }: WithMenuProps, { platform }) => {${(0, utils_1.when)(platforms.includes('webview')) `
-    const webviewText = 'Open Webview ↗️';`}
-    const aboutText = 'About ℹ';
-    const aboutData = JSON.stringify({ action: 'about' });
+const WithMenu = ({ children }: WithMenuProps, { platform }) => {${(0, utils_1.when)(withWebview) `
+  const webviewText = 'Open Webview ↗️';`}
+  const aboutText = 'About ℹ';
+  const aboutData = JSON.stringify({ action: 'about' });
 
 ${(0, utils_1.when)(platforms.includes('messenger')) `
-    if (platform === 'messenger') {
-      return (
-        <Messenger.ButtonTemplate
-          buttons={${`${(0, utils_1.when)(platforms.includes('webview')) `
-            <>`}
-              <Messenger.PostbackButton title={aboutText} payload={aboutData} />${(0, utils_1.when)(platforms.includes('webview')) `
-              <Messenger.UrlButton
-                title={webviewText}
-                url={\`https://\${domain}/webview?platform=messenger\`}
-                messengerExtensions
-              />
-            </>`}
-          `}}
-        >
-          {children}
-        </Messenger.ButtonTemplate>
-      );
-    }`}
+  if (platform === 'messenger') {
+    return (
+      <Messenger.ButtonTemplate
+        buttons={${`${(0, utils_1.when)(withWebview) `
+          <>`}
+            <Messenger.PostbackButton title={aboutText} payload={aboutData} />${(0, utils_1.when)(withWebview) `
+            <MessengerWebviewButton title={webviewText} />
+          </>`}
+        `}}
+      >
+        {children}
+      </Messenger.ButtonTemplate>
+    );
+  }`}
+${(0, utils_1.when)(platforms.includes('twitter')) `
+  if (platform === 'twitter') {
+    return (
+      <Twitter.DirectMessage${(0, utils_1.when)(withWebview) `
+        buttons={<TwitterWebviewButton label={webviewText} />}`}
+        quickReplies={
+          <Twitter.QuickReply label={aboutText} metadata={aboutData} />
+        }
+      >
+        {children}
+      </Twitter.DirectMessage>
+    );
+  }`}
 ${(0, utils_1.when)(platforms.includes('telegram')) `
-    if (platform === 'telegram') {
-      return (
-        <Telegram.Text
-          replyMarkup={
-            <Telegram.InlineKeyboard>
-              <Telegram.CallbackButton text={aboutText} data={aboutData} />${(0, utils_1.when)(platforms.includes('webview')) `
-              <Telegram.UrlButton
-                login
-                text={webviewText}
-                url={\`https://\${domain}/auth/telegram\`}
-              />`}
-            </Telegram.InlineKeyboard>
-          }
-        >
-          {children}
-        </Telegram.Text>
-      );
-    }`}
+  if (platform === 'telegram') {
+    return (
+      <Telegram.Text
+        replyMarkup={
+          <Telegram.InlineKeyboard>
+            <Telegram.CallbackButton text={aboutText} data={aboutData} />${(0, utils_1.when)(withWebview) `
+            <TelegramWebviewButton text={webviewText} />`}
+          </Telegram.InlineKeyboard>
+        }
+      >
+        {children}
+      </Telegram.Text>
+    );
+  }`}
 ${(0, utils_1.when)(platforms.includes('line')) `
-    if (platform === 'line') {${(0, utils_1.when)(platforms.includes('webview')) `
-      const liffLink = \`https://liff.line.me/\${lineLiffId}\`;`}
-      return (
-        <Line.ButtonTemplate
-          altText={(template) => template.text}
-          actions={${`${(0, utils_1.when)(platforms.includes('webview')) `
-            <>`}
-              <Line.PostbackAction
-                label={aboutText}
-                displayText={aboutText}
-                data={aboutData}
-              />${(0, utils_1.when)(platforms.includes('webview')) `
-              <Line.UriAction label={webviewText} uri={liffLink} />
-            </>`}
-          `}}
-        >
-          {children}
-        </Line.ButtonTemplate>
-      );
-    }`}
-
+  if (platform === 'line') {
     return (
-      <p>
-        {children}${(0, utils_1.when)(platforms.includes('webview')) `
-        <br />
-        Open Webview: https://{domain}/webview`}
-      </p>
+      <Line.ButtonTemplate
+        altText={(template) => template.text}
+        actions={${`${(0, utils_1.when)(withWebview) `
+          <>`}
+            <Line.PostbackAction
+              label={aboutText}
+              displayText={aboutText}
+              data={aboutData}
+            />${(0, utils_1.when)(withWebview) `
+            <LineWebviewAction label={webviewText} />
+          </>`}
+        `}}
+      >
+        {children}
+      </Line.ButtonTemplate>
     );
-  };
+  }`}
 
+  return <p>{children}</p>;
+};
 
-
-export default ${platforms.includes('webview')
-    ? `makeContainer({
-  deps: [
-    ServerDomain,${(0, utils_1.when)(platforms.includes('line')) `
-    LineLiffId,`}
-  ],
-})(WithMenu);`
-    : `WithMenu;`}
+export default WithMenu;
 `;
 //# sourceMappingURL=WithMenu.tsx.t.js.map

lib/template/src/components/WithYesNoReplies.tsx.t.js

@@ -6,3 +6,4 @@ "use strict";
 import Machinat, { MachinatNode } from '@machinat/core';${(0, utils_1.when)(platforms.includes('messenger')) `
-import * as Messenger from '@machinat/messenger/components';`}${(0, utils_1.when)(platforms.includes('telegram')) `
+import * as Messenger from '@machinat/messenger/components';`}${(0, utils_1.when)(platforms.includes('twitter')) `
+import * as Twitter from '@machinat/twitter/components';`}${(0, utils_1.when)(platforms.includes('telegram')) `
 import * as Telegram from '@machinat/telegram/components';`}${(0, utils_1.when)(platforms.includes('line')) `
@@ -52,2 +53,17 @@ import * as Line from '@machinat/line/components';`}
     );
+  }`}${(0, utils_1.when)(platforms.includes('twitter')) `
+
+  if (platform === 'twitter') {
+    return (
+      <Twitter.Expression
+        quickReplies={
+          <>
+            <Twitter.QuickReply label={yesWords} metadata={yesData} />
+            <Twitter.QuickReply label={noWords} metadata={noData} />
+          </>
+        }
+      >
+        {children}
+      </Twitter.Expression>
+    );
   }`}${(0, utils_1.when)(platforms.includes('line')) `
@@ -54,0 +70,0 @@

lib/template/src/handlers/handleChat.tsx.t.js

@@ -33,3 +33,3 @@ "use strict";
       if (intent.type === 'about') {
-        return reply(<About.Start channel={event.channel} />);
+        return reply(<About.Start />);
       }
@@ -36,0 +36,0 @@

lib/template/src/handlers/handleWebview.tsx.t.d.ts

 import { CreateAppContext } from '../../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ platforms, withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/src/handlers/handleWebview.tsx.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../../utils");
-exports.default = ({ platforms }) => (0, utils_1.when)(platforms.includes('webview')) `
+exports.default = ({ platforms, withWebview }) => (0, utils_1.when)(withWebview) `
 import Machinat, { makeContainer, BasicBot } from '@machinat/core';
@@ -6,0 +6,0 @@ import WithMenu from '../components/WithMenu';

lib/template/src/main.tsx.t.d.ts

 import { CreateAppContext } from '../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ platforms, withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/src/main.tsx.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils");
-exports.default = ({ platforms }) => `
+exports.default = ({ platforms, withWebview }) => `
 import ${(0, utils_1.when)(platforms.includes('telegram')) `Machinat, `}{
@@ -12,3 +12,3 @@ makeContainer,
 import Script from '@machinat/script';
-import handleChat from './handlers/handleChat';${(0, utils_1.when)(platforms.includes('webview')) `
+import handleChat from './handlers/handleChat';${(0, utils_1.when)(withWebview) `
 import handleWebview from './handlers/handleWebview';`}
@@ -20,5 +20,9 @@ import { AppEventContext, ChatEventContext } from './types';
   const chat$ = event$
-    .pipe(${(0, utils_1.when)(platforms.includes('webview')) `
+    .pipe(${(0, utils_1.when)(withWebview) `
       filter((ctx) => ctx.event.platform !== 'webview'),`}
       filter(
+        (ctx) =>
+          ctx.event.category === 'message' || ctx.event.category === 'postback'
+      ),
+      filter(
         makeContainer({ deps: [Script.Processor] })(
@@ -41,8 +45,2 @@ (processor) => async (ctx: ChatEventContext) => {
   chat$
-    .pipe(
-      filter(
-        (ctx) =>
-          ctx.event.category === 'message' || ctx.event.category === 'postback'
-      )
-    )
     .subscribe(handleChat)
@@ -52,3 +50,3 @@ .catch(console.error);${(0, utils_1.when)(platforms.includes('telegram')) `
   // answer Telegram callback_query
-  chat$
+  event$
     .pipe(filter((ctx) => ctx.event.type === 'callback_query'))
@@ -59,3 +57,3 @@ .subscribe(
     )
-    .catch(console.error);`}${(0, utils_1.when)(platforms.includes('webview')) `
+    .catch(console.error);`}${(0, utils_1.when)(withWebview) `
 
@@ -62,0 +60,0 @@ // handle events from webview

lib/template/src/migrations/0-init-app.ts.t.d.ts

 import { CreateAppContext } from '../../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ platforms, withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/src/migrations/0-init-app.ts.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../../utils");
-exports.default = ({ platforms }) => `
+exports.default = ({ platforms, withWebview }) => `
 import { makeContainer } from '@machinat/core';${(0, utils_1.when)(platforms.includes('messenger')) `
-import Messenger from '@machinat/messenger';`}${(0, utils_1.when)(platforms.includes('telegram')) `
+import Messenger from '@machinat/messenger';`}${(0, utils_1.when)(platforms.includes('twitter')) `
+import Twitter from '@machinat/twitter';
+import TwitterAssetManager from '@machinat/twitter/asset';`}${(0, utils_1.when)(platforms.includes('telegram')) `
 import Telegram from '@machinat/telegram';`}${(0, utils_1.when)(platforms.includes('line')) `
@@ -15,5 +17,6 @@ import Line from '@machinat/line';`}
   MESSENGER_APP_SECRET,
-  MESSENGER_VERIFY_TOKEN,`}${(0, utils_1.when)(platforms.includes('telegram')) `
+  MESSENGER_VERIFY_TOKEN,`}${(0, utils_1.when)(platforms.includes('twitter')) `
+  TWITTER_WEBHOOK_ENV,`}${(0, utils_1.when)(platforms.includes('telegram')) `
   TELEGRAM_SECRET_PATH,`}
-} = process.env;
+} = process.env as Record<string, string>;
 
@@ -24,3 +27,5 @@ const ENTRY_URL = \`https://\${DOMAIN}\`;
   deps: [${(0, utils_1.when)(platforms.includes('messenger')) `
-    Messenger.Bot,`}${(0, utils_1.when)(platforms.includes('telegram')) `
+    Messenger.Bot,`}${(0, utils_1.when)(platforms.includes('twitter')) `
+    Twitter.Bot,
+    TwitterAssetManager,`}${(0, utils_1.when)(platforms.includes('telegram')) `
     Telegram.Bot,`}${(0, utils_1.when)(platforms.includes('line')) `
@@ -30,3 +35,5 @@ Line.Bot,`}
 })(async (${(0, utils_1.when)(platforms.includes('messenger')) `
-  messengerBot,`}${(0, utils_1.when)(platforms.includes('telegram')) `
+  messengerBot,`}${(0, utils_1.when)(platforms.includes('twitter')) `
+  twitterBot,
+  twitterAssetManager,`}${(0, utils_1.when)(platforms.includes('telegram')) `
   telegramBot,`}${(0, utils_1.when)(platforms.includes('line')) `
@@ -39,3 +46,3 @@ lineBot`}
       { locale: 'default', text: 'Hello World!' },
-    ],${(0, utils_1.when)(platforms.includes('webview')) `
+    ],${(0, utils_1.when)(withWebview) `
     whitelisted_domains: [ENTRY_URL],`}
@@ -61,4 +68,17 @@ });
       subscribed_fields: ['messages', 'messaging_postbacks'],
-  });`}${(0, utils_1.when)(platforms.includes('telegram')) `
+  });`}${(0, utils_1.when)(platforms.includes('twitter')) `
 
+  // register webhook on Twitter
+  await twitterAssetManager.setUpWebhook(
+    'default',
+    TWITTER_WEBHOOK_ENV,
+    \`\${ENTRY_URL}/webhook/twitter\`
+  );
+
+  // subscribe to Twitter agent user
+  await twitterBot.makeApiCall(
+    'POST',
+    \`1.1/account_activity/all/\${TWITTER_WEBHOOK_ENV}/subscriptions.json\`
+  );`}${(0, utils_1.when)(platforms.includes('telegram')) `
+
   // setup webhook of the Telegram bot
@@ -77,7 +97,9 @@ await telegramBot.makeApiCall('setWebhook', {
   deps: [${(0, utils_1.when)(platforms.includes('messenger')) `
-    Messenger.Bot,`}${(0, utils_1.when)(platforms.includes('telegram')) `
+    Messenger.Bot,`}${(0, utils_1.when)(platforms.includes('twitter')) `
+    TwitterAssetManager,`}${(0, utils_1.when)(platforms.includes('telegram')) `
     Telegram.Bot,`}
   ],
 })(async (${(0, utils_1.when)(platforms.includes('messenger')) `
-  messengerBot,`}${(0, utils_1.when)(platforms.includes('telegram')) `
+  messengerBot,`}${(0, utils_1.when)(platforms.includes('twitter')) `
+  twitterAssetManager,`}${(0, utils_1.when)(platforms.includes('telegram')) `
   telegramBot,`}
@@ -112,5 +134,9 @@ ) => {
   );`}
+${(0, utils_1.when)(platforms.includes('twitter')) `
+
+  // delete Twitter webhook
+  await twitterAssetManager.deleteWebhook('default', TWITTER_WEBHOOK_ENV);`}
 ${(0, utils_1.when)(platforms.includes('telegram')) `
 
-  // delete webhook of the Telegram bot
+  // delete Telegram webhook
   await telegramBot.makeApiCall('deleteWebhook');`}
@@ -117,0 +143,0 @@ });

lib/template/src/services/useIntent.ts.t.d.ts

@@ -1,3 +0,2 @@
-import { CreateAppContext } from '../../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: () => string;
 export default _default;

lib/template/src/services/useIntent.ts.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const utils_1 = require("../../../utils");
-exports.default = ({ platforms }) => `
+exports.default = () => `
 import { makeFactoryProvider, IntentRecognizer } from '@machinat/core';
@@ -16,16 +15,9 @@ import { ChatEventContext } from '../types';
 
-    if (${`${(0, utils_1.when)(platforms.includes('messenger')) `
-      (event.platform === 'messenger' &&
-        (event.type === 'quick_reply' || event.type === 'postback')) ||`}${(0, utils_1.when)(platforms.includes('telegram')) `
-      (event.platform === 'telegram' && event.type === 'callback_query') ||`}${(0, utils_1.when)(platforms.includes('line')) `
-      (event.platform === 'line' && event.type === 'postback') ||`}`.slice(0, -3)}
-    ) {
-      if (event.data) {
-        const { action, ...payload } = JSON.parse(event.data);
-        return {
-          type: action,
-          confidence: 1,
-          payload,
-        };
-      }
+    if ('data' in event && event.data) {
+      const { action, ...payload } = JSON.parse(event.data);
+      return {
+        type: action,
+        confidence: 1,
+        payload,
+      };
     }
@@ -32,0 +24,0 @@

lib/template/src/types.ts.t.d.ts

 import { CreateAppContext } from '../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ platforms, withWebview, }: CreateAppContext) => string;
 export default _default;

lib/template/src/types.ts.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils");
-exports.default = ({ platforms }) => `${(0, utils_1.when)(platforms.includes('messenger')) `
-import type { MessengerEventContext } from '@machinat/messenger';${(0, utils_1.when)(platforms.includes('webview')) `
-import type MessengerWebviewAuth from '@machinat/messenger/webview';`}`}${(0, utils_1.when)(platforms.includes('telegram')) `
-import type { TelegramEventContext } from '@machinat/telegram';${(0, utils_1.when)(platforms.includes('webview')) `
+exports.default = ({ platforms, withWebview, }) => `${(0, utils_1.when)(platforms.includes('messenger')) `
+import type { MessengerEventContext } from '@machinat/messenger';${(0, utils_1.when)(withWebview) `
+import type MessengerWebviewAuth from '@machinat/messenger/webview';`}`}${(0, utils_1.when)(platforms.includes('twitter')) `
+import type { TwitterEventContext } from '@machinat/twitter';${(0, utils_1.when)(withWebview) `
+import type TwitterWebviewAuth from '@machinat/twitter/webview';`}`}${(0, utils_1.when)(platforms.includes('telegram')) `
+import type { TelegramEventContext } from '@machinat/telegram';${(0, utils_1.when)(withWebview) `
 import type TelegramWebviewAuth from '@machinat/telegram/webview';`}`}${(0, utils_1.when)(platforms.includes('line')) `
-import type { LineEventContext } from '@machinat/line';${(0, utils_1.when)(platforms.includes('webview')) `
-import type LineWebviewAuth from '@machinat/line/webview';`}`}${(0, utils_1.when)(platforms.includes('webview')) `
+import type { LineEventContext } from '@machinat/line';${(0, utils_1.when)(withWebview) `
+import type LineWebviewAuth from '@machinat/line/webview';`}`}${(0, utils_1.when)(withWebview) `
 import type { WebviewEventContext } from '@machinat/webview';`}
 
 export type ChatEventContext =${(0, utils_1.when)(platforms.includes('messenger')) `
-  | MessengerEventContext`}${(0, utils_1.when)(platforms.includes('telegram')) `
+  | MessengerEventContext`}${(0, utils_1.when)(platforms.includes('twitter')) `
+  | TwitterEventContext`}${(0, utils_1.when)(platforms.includes('telegram')) `
   | TelegramEventContext`}${(0, utils_1.when)(platforms.includes('line')) `
   | LineEventContext`};
-${(0, utils_1.when)(platforms.includes('webview')) `
+${(0, utils_1.when)(withWebview) `
 
 export type WebAppEventContext = WebviewEventContext<${(0, utils_1.when)(platforms.includes('messenger')) `
-    | MessengerWebviewAuth`}${(0, utils_1.when)(platforms.includes('telegram')) `
+    | MessengerWebviewAuth`}${(0, utils_1.when)(platforms.includes('twitter')) `
+    | TwitterWebviewAuth`}${(0, utils_1.when)(platforms.includes('telegram')) `
     | TelegramWebviewAuth`}${(0, utils_1.when)(platforms.includes('line')) `
@@ -26,5 +30,5 @@ | LineWebviewAuth`}
 export type AppEventContext =
-  | ChatEventContext${(0, utils_1.when)(platforms.includes('webview')) `
+  | ChatEventContext${(0, utils_1.when)(withWebview) `
   | WebAppEventContext`};
 `;
 //# sourceMappingURL=types.ts.t.js.map

lib/template/webview/next-env.d.ts.t.d.ts

 import { CreateAppContext } from '../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/webview/next-env.d.ts.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils");
-exports.default = ({ platforms }) => (0, utils_1.when)(platforms.includes('webview')) `
+exports.default = ({ withWebview }) => (0, utils_1.when)(withWebview) `
 /// <reference types="next" />
@@ -6,0 +6,0 @@ /// <reference types="next/image-types/global" />

lib/template/webview/next.config.js.t.d.ts

 import { CreateAppContext } from '../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ platforms, withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/webview/next.config.js.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils");
-exports.default = ({ platforms }) => (0, utils_1.when)(platforms.includes('webview')) `
+exports.default = ({ platforms, withWebview }) => (0, utils_1.when)(withWebview) `
 module.exports = {
@@ -9,3 +9,4 @@ distDir: '../dist',
   publicRuntimeConfig: {${(0, utils_1.when)(platforms.includes('messenger')) `
-    messengerAppId: process.env.MESSENGER_APP_ID,`}${(0, utils_1.when)(platforms.includes('telegram')) `
+    messengerPageId: process.env.MESSENGER_PAGE_ID,`}${(0, utils_1.when)(platforms.includes('twitter')) `
+    twitterAgentId: process.env.TWITTER_ACCESS_TOKEN.split('-', 1)[0],`}${(0, utils_1.when)(platforms.includes('telegram')) `
     telegramBotName: process.env.TELEGRAM_BOT_NAME,`}${(0, utils_1.when)(platforms.includes('line')) `
@@ -12,0 +13,0 @@ lineLiffId: process.env.LINE_LIFF_ID,`}

lib/template/webview/pages/_document.tsx.t.d.ts

 import { CreateAppContext } from '../../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/webview/pages/_document.tsx.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../../utils");
-exports.default = ({ platforms }) => (0, utils_1.when)(platforms.includes('webview')) `
+exports.default = ({ withWebview }) => (0, utils_1.when)(withWebview) `
 import { Html, Head, Main, NextScript } from 'next/document'
@@ -6,0 +6,0 @@

lib/template/webview/pages/index.tsx.t.d.ts

 import { CreateAppContext } from '../../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ platforms, withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/webview/pages/index.tsx.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../../utils");
-exports.default = ({ platforms }) => (0, utils_1.when)(platforms.includes('webview')) `
+exports.default = ({ platforms, withWebview }) => (0, utils_1.when)(withWebview) `
 import React from 'react';
@@ -9,3 +9,4 @@ import Head from 'next/head';
 import WebviewClient, { useEventReducer } from '@machinat/webview/client';${(0, utils_1.when)(platforms.includes('messenger')) `
-import MessengerWebviewAuth from '@machinat/messenger/webview/client';`}${(0, utils_1.when)(platforms.includes('telegram')) `
+import MessengerWebviewAuth from '@machinat/messenger/webview/client';`}${(0, utils_1.when)(platforms.includes('twitter')) `
+import TwitterWebviewAuth from '@machinat/twitter/webview/client';`}${(0, utils_1.when)(platforms.includes('telegram')) `
 import TelegramWebviewAuth from '@machinat/telegram/webview/client';`}${(0, utils_1.when)(platforms.includes('line')) `
@@ -20,3 +21,6 @@ import LineWebviewAuth from '@machinat/line/webview/client';`}
     new MessengerWebviewAuth({
-      appId: publicRuntimeConfig.messengerAppId,
+      pageId: publicRuntimeConfig.messengerPageId,
+    }),`}${(0, utils_1.when)(platforms.includes('twitter')) `
+    new TwitterWebviewAuth({
+      agentId: publicRuntimeConfig.twitterAgentId,
     }),`}${(0, utils_1.when)(platforms.includes('telegram')) `
@@ -23,0 +27,0 @@ new TelegramWebviewAuth({

lib/template/webview/public/favicon.ico.t.d.ts

@@ -0,3 +1,4 @@
+import type { CreateAppContext } from '../../../types';
 export declare const binary = "favicon.ico";
-declare const _default: () => null;
+declare const _default: ({ withWebview }: CreateAppContext) => boolean;
 export default _default;

lib/template/webview/public/favicon.ico.t.js

@@ -5,3 +5,3 @@ "use strict";
 exports.binary = 'favicon.ico';
-exports.default = () => null;
+exports.default = ({ withWebview }) => withWebview;
 //# sourceMappingURL=favicon.ico.t.js.map

lib/template/webview/tsconfig.json.t.d.ts

 import { CreateAppContext } from '../../types';
-declare const _default: ({ platforms }: CreateAppContext) => string;
+declare const _default: ({ withWebview }: CreateAppContext) => string;
 export default _default;

lib/template/webview/tsconfig.json.t.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils");
-exports.default = ({ platforms }) => (0, utils_1.when)(platforms.includes('webview')) `
+exports.default = ({ withWebview }) => (0, utils_1.when)(withWebview) `
 {
@@ -6,0 +6,0 @@ "compilerOptions": {

lib/types.d.ts

@@ -0,5 +1,7 @@
+export declare type PlatformType = 'messenger' | 'line' | 'telegram' | 'twitter';
 export declare type CreateAppContext = {
     projectName: string;
     recognizer: 'regex' | 'dialogflow';
-    platforms: string[];
+    withWebview: boolean;
+    platforms: PlatformType[];
 };

lib/utils.d.ts

 export declare const when: (shouldOutput: boolean) => (strs: TemplateStringsArray, ...inputs: unknown[]) => string;
-export declare const polishFileContent: (inputString: null | string) => null | string;
+export declare const polishFileContent: (input: null | string | boolean) => null | string | boolean;
 export declare const getEmptyEnvs: (dotenvContent: string) => Map<string, string[]>;

lib/utils.js

@@ -15,7 +15,10 @@ "use strict";
 exports.when = when;
-const polishFileContent = (inputString) => {
-    if (!inputString) {
+const polishFileContent = (input) => {
+    if (typeof input !== 'string') {
+        return input;
+    }
+    if (input === '') {
         return null;
     }
-    let content = inputString;
+    let content = input;
     if (content[0] === '\n') {
@@ -22,0 +25,0 @@ content = content.slice(1);

package.json

 {
   "name": "@machinat/create-app",
-  "version": "0.6.0-canary.2",
+  "version": "0.6.0-canary.3",
   "author": "Patrick Liu <[e-mail]>  (https://github.com/lrills)",
@@ -39,3 +39,3 @@ "repository": {
   },
-  "gitHead": "74bc7d3dc70d9b62418064b0436c5f94c459e608"
+  "gitHead": "ebe85c535c80b0d9c0c320c799d537487856a362"
 }

README.md

@@ -11,6 +11,6 @@ # Create Machinat App
 # with npm
-npm init @machinat/app@latest -- -p <platform> [-p ...] my-project
+npm init @machinat/app@latest -- -p <platform> [-p ...] [--webview] my-project
 
 # with yarn
-yarn create @machinat/app -- -p <platform> [-p ...] my-project
+yarn create @machinat/app -- -p <platform> [-p ...] [--webview] my-project
 ```
@@ -17,0 +17,0 @@

No alert changes

Improved metrics

Total package byte prevSize

100688

increased by6.65%

Lines of code

1834

increased by7%

No dependency changes