Skip to content
Permalink
Browse files

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

  • Loading branch information...
martinock authored and regalius committed Feb 2, 2019
1 parent 7a0f0b1 commit 2a395e69688b23f2ccb2ebcdbd7d3cc3dfad5b44
Showing with 2,413 additions and 64 deletions.
  1. +1 −1 README.md
  2. +2 −0 docusaurus/docs/main-concept/generator.md
  3. +67 −0 docusaurus/docs/main-concept/typescript.md
  4. +2 −1 docusaurus/website/sidebars.json
  5. +15 −0 example/typescript-app/.gitignore
  6. +38 −0 example/typescript-app/package.json
  7. +4 −0 example/typescript-app/src/_locale/en.json
  8. +4 −0 example/typescript-app/src/_locale/id.json
  9. 0 ...create-treats-app/<%APP_NAME%>/src/_locale/index.js → example/typescript-app/src/_locale/index.ts
  10. 0 ...create-treats-app/<%APP_NAME%>/src/_route/module.js → example/typescript-app/src/_route/module.ts
  11. 0 ...tor/create-treats-app/<%APP_NAME%>/src/_route/path.js → example/typescript-app/src/_route/path.ts
  12. 0 ...r/create-treats-app/<%APP_NAME%>/src/_route/route.js → example/typescript-app/src/_route/route.ts
  13. +1 −0 example/typescript-app/src/lib/treats.d.ts
  14. BIN example/typescript-app/src/page/welcome/NotoSans-Bold.ttf
  15. BIN example/typescript-app/src/page/welcome/NotoSans-Regular.ttf
  16. 0 ...ts-app/<%APP_NAME%>/src/page/welcome/index.js → example/typescript-app/src/page/welcome/index.tsx
  17. BIN example/typescript-app/src/page/welcome/treats.png
  18. +88 −0 example/typescript-app/src/page/welcome/welcome.css
  19. +89 −0 example/typescript-app/src/page/welcome/welcome.tsx
  20. +13 −0 example/typescript-app/treats.config.js
  21. +69 −0 example/typescript-app/tsconfig.json
  22. +0 −1 jest.config.js
  23. +1 −1 packages/create-treats-app/README.md
  24. +1 −0 packages/create-treats-app/generator/create-treats-app/<%APP_NAME%>/.gitignore
  25. +66 −0 ...-treats-app/generator/create-treats-app/<%APP_NAME%>/<%if(USE_TYPESCRIPT)%>tsconfig.json<%endif%>
  26. +12 −1 packages/create-treats-app/generator/create-treats-app/<%APP_NAME%>/package.json
  27. +1 −0 ...pp/<%APP_NAME%>/src/<%if(USE_TYPESCRIPT)%>lib<%endif%>/<%if(USE_TYPESCRIPT)%>treats.d.ts<%endif%>
  28. +7 −0 ...ator/create-treats-app/<%APP_NAME%>/src/_locale/index.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>
  29. +9 −0 ...ator/create-treats-app/<%APP_NAME%>/src/_route/module.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>
  30. +1 −0 ...erator/create-treats-app/<%APP_NAME%>/src/_route/path.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>
  31. +12 −0 ...rator/create-treats-app/<%APP_NAME%>/src/_route/route.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>
  32. +5 −0 ...reate-treats-app/<%APP_NAME%>/src/page/welcome/index.<%if(USE_TYPESCRIPT)%>tsx<%else%>js<%endif%>
  33. +2 −2 ...<%APP_NAME%>/src/page/welcome/{welcome.js → welcome.<%if(USE_TYPESCRIPT)%>tsx<%else%>js<%endif%>}
  34. +6 −0 packages/create-treats-app/generator/create-treats-app/treats-generator.json
  35. +5 −2 packages/create-treats-app/index.js
  36. +6 −0 packages/create-treats-app/scripts/generate
  37. +1 −1 packages/treats/README.md
  38. +34 −4 packages/treats/alias.js
  39. +9 −4 ..._NAME%>/{<%COMPONENT_NAME%>.js → <%COMPONENT_NAME%>.<%if(USE_TYPESCRIPT)%>tsx<%else%>js<%endif%>}
  40. 0 ...ator/component/<%COMPONENT_NAME%>/{index.js → index.<%if(USE_TYPESCRIPT)%>tsx<%else%>js<%endif%>}
  41. +6 −0 packages/treats/generator/component/treats-generator.json
  42. +1 −1 ...%HELPER_NAME%>/{<%HELPER_NAME%>.js → <%HELPER_NAME%>.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>}
  43. 0 ...s/generator/helper/<%HELPER_NAME%>/{index.js → index.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>}
  44. +6 −0 packages/treats/generator/helper/treats-generator.json
  45. +2 −2 ...NAME%>/{<%MIDDLEWARE_NAME%>.js → <%MIDDLEWARE_NAME%>.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>}
  46. 0 ...tor/middleware/<%MIDDLEWARE_NAME%>/{index.js → index.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>}
  47. +6 −0 packages/treats/generator/middleware/treats-generator.json
  48. +4 −4 ...s/generator/redux/<%REDUX_NAME%>/{action.js → action.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>}
  49. 0 ...ats/generator/redux/<%REDUX_NAME%>/{index.js → index.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>}
  50. +9 −0 ...s/treats/generator/redux/<%REDUX_NAME%>/initial-state.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>
  51. +0 −3 packages/treats/generator/redux/<%REDUX_NAME%>/initial-state.js
  52. +5 −5 ...generator/redux/<%REDUX_NAME%>/{reducer.js → reducer.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>}
  53. 0 ...reats/generator/redux/<%REDUX_NAME%>/{type.js → type.<%if(USE_TYPESCRIPT)%>ts<%else%>js<%endif%>}
  54. +6 −0 packages/treats/generator/redux/treats-generator.json
  55. +1 −2 ...or/test/{<%TEST_NAME%>.spec.js → <%TEST_NAME%>.spec.<%if(USE_TYPESCRIPT)%>tsx<%else%>js<%endif%>}
  56. +6 −0 packages/treats/generator/test/treats-generator.json
  57. +1,400 −0 packages/treats/lib/treats.d.ts
  58. +4 −0 packages/treats/package.json
  59. +18 −0 packages/treats/resolver.js
  60. +22 −3 packages/treats/scripts/build
  61. +1 −1 packages/treats/scripts/config/jest.config.js
  62. +27 −3 packages/treats/scripts/config/webpack.config.client.build.js
  63. +33 −4 packages/treats/scripts/config/webpack.config.client.development.js
  64. +27 −3 packages/treats/scripts/config/webpack.config.server.build.js
  65. +32 −3 packages/treats/scripts/config/webpack.config.server.development.js
  66. +6 −0 packages/treats/scripts/generate
  67. +51 −12 packages/treats/scripts/start
  68. +59 −0 packages/treats/scripts/util/checkTypescript.js
  69. +78 −0 packages/treats/scripts/util/generateTSConfig.js
  70. +19 −0 packages/treats/scripts/util/isTSFileExists.js
  71. +13 −0 packages/treats/scripts/util/load-config.js
@@ -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!
@@ -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
@@ -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
@@ -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",
@@ -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
@@ -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"
}
}
@@ -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}"
}
@@ -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."
}
@@ -0,0 +1 @@
/// <reference types="treats" />
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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;
}
@@ -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));
@@ -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;

0 comments on commit 2a395e6

Please sign in to comment.
You can’t perform that action at this time.