feat(tools): add typescript support (#7)

#2

README.md

@@ -20,7 +20,7 @@ To get started with Treats, you can simply do the following:
 You don't need to configure webpack, babel, or any other build tools by yourself
 
 ## What's in the box?
-1. React, JSX, ES6, and Flow syntax support (TypeScript support is coming!).
+1. React, JSX, ES6, and Flow (or TypeScript) syntax support.
 2. Preconfigured Redux, GraphQL client and i18n out-of-the-box. *(You can disable Redux/GraphQL client if you're not using it, it'll only leave minimum trace in your build)*
 3. Server-side rendering, code-splitting and hot-module replacement configured out-of-the-box.
 4. CSS Modules support with CSS, LESS, or SASS syntax with autoprefixer, or use any CSS-in-JS library that you like!

docusaurus/docs/main-concept/generator.md

@@ -25,6 +25,8 @@ There's several built-in generator that you can use:
 4. `helper` -  Generates Treats helper object boilerplates.
 5. `middleware` -  Generates Treats middleware object boilerplates.
 
+We also provide option to create a Typescript template. To generate Typescript templates choose `true (t)` when prompted about Typescript usage.
+
 For more information about how to create your own template you can find it [here][authoring-addons-generators]
 
 [authoring-addons-generators]: ../authoring-addons/generator.html

docusaurus/docs/main-concept/typescript.md

@@ -0,0 +1,67 @@
+---
+id: typescript
+title: Working with Typescript
+sidebar_label: Typescript
+---
+Treats also provide Typescript support. If you write your projects in Typescript, Treats will recognize the syntax and render your component. We provide support both in our `create-treats-app` and `treats` commands.
+
+"How Treats recognize our projects as a Typescript projects?"
+
+Good question. Treats will recognize your projects as a Typescript projects when you provide `.ts or .tsx` in your projects root. Therefore, **please be aware when it is necessary to add `.(ts|tsx) files` into your projects**.
+
+### Create Your First Typescript Treats App
+To start Typescript Treats project, simply choose `true (t)` when prompted about Typescript usage on `create-treats-app` command.
+
+```
+ Treats >  Welcome to Treats! Let's setup your app, shall we?
+prompt: Application name:  (my-ts-treats-app) <your-app-name>
+prompt: Application version:  (0.0.1) <your-app-version>
+prompt: Application description:  (My First Treats App in Typescript) <your-app-description>
+prompt: Do you want to use Typescript? (true (t)|false (f)): (false)
+```
+
+After you finish fill the prompt, Treats will install the dependencies for you. So get some tea for you first and rest for a bit :)
+
+Finished! Congratulations your first Treats app in Typescript is already generated. To start the projects, type `yarn start` or `npm start`
+
+```
+cd <your-projects-name>
+yarn start
+```
+
+### Typescript Generator
+As written in [Generator][main-concept-generator], to generate Typescript built-in template (component, redux, test, helper, and middleware), simply choose `true (t)` when prompted about Typescript usage.
+
+### Typescript Config
+As we know, Typescript projects require `tsconfig.json`. We also understand that some of its configurations redundant with our `treats.config.(js|ts)`. Therefore, we create a Typescript handler in our `treats.config.(js|ts)`. This will make our `tsconfig.json` a generated file, which means: __"Please do not change config in tsconfig.json. Make your change in treats.config.(js|ts) instead"__.
+
+The Typescript field content will be the same as `tsconfig.json`, so please check the [docs][tsconfig-docs], if you want to customize one. Nothing to fear if you don't want to customize one, we have default config and will generate it for you the moment you `start` or `build` your projects.
+
+Here's some example of `treats.config.(js|ts)`:
+
+```
+// treats.config.(js|ts)
+...
+const config = {
+    ...,
+
+    typescript: {
+        ...,
+        "compilerOptions": {
+            ...,
+            target: "es5",
+            paths: {
+                someAlias: [
+                    "./path/to/alias"
+                ]
+            }
+        } 
+    }
+};
+
+module.exports = config;
+```
+
+
+[main-concept-generator]: ./generator.html
+[tsconfig-docs]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

docusaurus/website/sidebars.json

@@ -24,7 +24,8 @@
             "main-concept/environment-variable",
             "main-concept/generator",
             "main-concept/scripts",
-            "main-concept/addons"
+            "main-concept/addons",
+            "main-concept/typescript"
         ],
         "API Reference": [
             "api-reference/overview",

example/typescript-app/.gitignore

@@ -0,0 +1,15 @@
+node_modules
+yarn.lock
+yarn-error.log
+package-lock.json
+.env
+.arcrc
+dist
+public
+coverage
+storybook-static
+stats
+profile
+packages/**/*.md
+**/*.DS_Store
+.cache-loader

example/typescript-app/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "typescript-app",
+    "version": "0.0.1",
+    "description": "My First Treats App with Typescript Language!",
+    "license": "ISC",
+    "scripts": {
+        "start": "treats start",
+        "build:client": "treats build --target client",
+        "build:server": "treats build --target server",
+        "build": "treats build",
+        "clean": "treats clean",
+        "generate": "treats generate",
+        "analyze:client": "treats build --target client --analyze",
+        "analyze:server": "treats build --target server --analyze",
+        "profile": "yarn build:server && node --prof dist/server.js",
+        "documentation:build": "treats documentation build src/",
+        "documentation:lint": "treats documentation lint src/",
+        "documentation:phriction": "treats documentation export src/ --target phriction",
+        "documentation:flush": "treats documentation flush src/",
+        "test": "treats test",
+        "test:watch": "treats test --watchAll",
+        "test:coverage": "treats test --coverage"
+    },
+    "dependencies": {
+        "treats": "0.1.1",
+        "typescript": "3.2.2",
+        "@types/enzyme": "3.1.15",
+        "@types/jest": "23.3.10",
+        "@types/node": "10.12.15",
+        "@types/react": "16.7.17",
+        "@types/react-dom": "16.0.11",
+        "@types/react-helmet": "5.0.7",
+        "@types/react-intl": "2.3.14",
+        "@types/react-redux": "6.0.11",
+        "@types/react-router-dom": "4.3.1",
+        "@types/redux": "3.6.0"
+    }
+}

example/typescript-app/src/_locale/en.json

@@ -0,0 +1,4 @@
+{
+    "welcome_page__description1": "A development kit to make your experience on building fully customizable {React} app with built-in Server-side rendering, Code-splitting, i18n, {Redux} and {GraphQL} sweeter!",
+    "welcome_page__description2": "To get started, edit {Source} and save to reload, or learn more on our {Documentation}"
+}

example/typescript-app/src/_locale/id.json

@@ -0,0 +1,4 @@
+{
+    "welcome_page__description1": "Sebuah development kit untuk membuat pengalaman anda dalam membangun sebuah aplikasi {React} yang sangat mudah dikustomisasi dengan Server-side rendering, Code-splitting, i18n, {Redux} dan {GraphQL} jadi lebih manis!",
+    "welcome_page__description2": "Untuk memulai, sunting {Source} dan simpan untuk me-reload, atau pelajari lebih lanjut di {Documentation} kami."
+}

example/typescript-app/src/lib/treats.d.ts

@@ -0,0 +1 @@
+/// <reference types="treats" />

example/typescript-app/src/page/welcome/welcome.css

@@ -0,0 +1,88 @@
+@font-face {
+    font-family: "Noto Sans";
+    src: url("./NotoSans-Bold.ttf");
+    font-weight: bold;
+}
+@font-face {
+    font-family: "Noto Sans";
+    src: url("./NotoSans-Regular.ttf");
+    font-weight: normal;
+}
+
+a {
+    color: #42b549;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #ff5722;
+}
+
+.welcome_page {
+    position: relative;
+    display: block;
+    font-family: "Noto Sans", sans-serif;
+    text-align: center;
+    height: 700px;
+    white-space: nowrap;
+    padding: 0 30px;
+}
+
+.welcome_page:before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    width: 0;
+}
+
+.welcome_page__content {
+    display: inline-block;
+    vertical-align: middle;
+    white-space: normal;
+    width: 100%;
+}
+
+.welcome_page__toped {
+    width: 200px;
+}
+.welcome_page__locale_switcher_container {
+    position: relative;
+    white-space: nowrap;
+    padding-top: 20px;
+    font-size: 12px;
+}
+
+.welcome_page__locale_switcher {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 10px;
+    min-width: 100px;
+    background: #fff;
+    color: #42b549;
+    border: 1px solid #f0f0f0;
+}
+
+.welcome_page__locale_switcher:hover {
+    color: #42b549;
+    background: #EEE;
+}
+
+.welcome_page__locale_switcher:global(.active) {
+    background: #42b549;
+    color: #fff;
+}
+
+.welcome_page__locale_switcher:first-child {
+    border-top-left-radius: 30px;
+    border-bottom-left-radius: 30px;
+}
+
+.welcome_page__locale_switcher:last-child {
+    border-top-right-radius: 30px;
+    border-bottom-right-radius: 30px;
+}
+
+.welcome_page__locale_switcher:global(.active):hover {
+    color: #FFF;
+}

example/typescript-app/src/page/welcome/welcome.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import Helmet from "@treats/helmet";
+import { FormattedMessage, injectIntl, InjectedIntlProps } from "@treats/intl";
+import AsyncComponent from "@treats/component/async-component";
+
+import style from "./welcome.css";
+import treats from "./treats.png";
+
+/**
+ *  Welcome to treats component
+ *  
+ *  NOTE:
+ *  If you have dependencies error:
+ *  "Could not find declaration file for @treats/..."
+ *  It means your treats doesn't support typescript yet.
+ *  Please update it to the latest version
+ * 
+ *  @param props React props
+ *  @param props.intl Intl Object
+ *  @author Tokopedia Engineering
+ */
+const Welcome = ({ intl }: InjectedIntlProps) => (
+    <div className={style.welcome_page}>
+        <Helmet>
+            <title>Welcome to Treats!</title>
+        </Helmet>
+        <div className={style.welcome_page__content}>
+            <img className={style.welcome_page__toped} src={treats} alt="Treats" />
+            <h1>Welcome, let&#39;s have some treats!</h1>
+            <FormattedMessage
+                id="welcome_page__description1"
+                values={{
+                    React: (
+                        <a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+                            React
+                        </a>
+                    ),
+                    Redux: (
+                        <a href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">
+                            Redux
+                        </a>
+                    ),
+                    GraphQL: (
+                        <a href="https://graphql.org/" target="_blank" rel="noopener noreferrer">
+                            GraphQL
+                        </a>
+                    )
+                }}
+            />
+            <p>
+                <FormattedMessage
+                    id="welcome_page__description2"
+                    values={{
+                        Source: <b>src/page/welcome.js</b>,
+                        Documentation: (
+                            <a
+                                href="https://tokopedia.github.io/treats"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                documentation
+                            </a>
+                        )
+                    }}
+                />
+            </p>
+            <div className={style.welcome_page__locale_switcher_container}>
+                <a
+                    className={`${style.welcome_page__locale_switcher}${
+                        intl.locale === "en" ? " active" : ""
+                    }`}
+                    href="/?lang=en"
+                >
+                    English
+                </a>
+                <a
+                    className={`${style.welcome_page__locale_switcher}${
+                        intl.locale === "id" ? " active" : ""
+                    }`}
+                    href="/?lang=id"
+                >
+                    Indonesian
+                </a>
+            </div>
+        </div>
+    </div>
+);
+
+export default AsyncComponent(module, injectIntl(Welcome));

example/typescript-app/treats.config.js

@@ -0,0 +1,13 @@
+const path = require("path");
+
+const config = {
+    app: {
+        name: "typescript-app",
+        slug: "typescript-app"
+    },
+    alias: {
+        "@page": path.resolve(__dirname, "./src/page")
+    }
+};
+
+module.exports = config;