opencomponents · ricardo-devis-agullo · Mar 28, 2023 · Mar 28, 2023
diff --git a/README.md b/README.md
@@ -1,158 +1,108 @@
-oc-template-react
-=================
+# oc-template-typescript-react
 
-react-templates & utilities for the [OpenComponents](https://github.com/opentable/oc) template system
+React-templates with TypeScript support & utilities for the [OpenComponents](https://github.com/opentable/oc) template system
 
-***
+Based on Nick Balestra's work on [oc-template-react](https://github.com/opencomponents/oc-template-react)
 
-Module for handling React templates in OC
-
-[![codecov](https://codecov.io/gh/opencomponents/oc-template-react/branch/master/graph/badge.svg)](https://codecov.io/gh/opencomponents/oc-template-react)
-[![Known Vulnerabilities](https://snyk.io/test/github/opencomponents/oc-template-react/badge.svg)](https://snyk.io/test/github/opencomponents/oc-template-react)
-[![npm version](https://badge.fury.io/js/oc-template-react.svg)](http://badge.fury.io/js/oc-template-react)
-
-| Node8             | Node9             | Node10            | 
-|-------------------|-------------------|-------------------|
-| [![Node8][1]][4]  | [![Node9][2]][4]  | [![Node10][3]][4] |
-
-[1]: https://travis-matrix-badges.herokuapp.com/repos/opencomponents/oc-template-react/branches/master/1
-[2]: https://travis-matrix-badges.herokuapp.com/repos/opencomponents/oc-template-react/branches/master/2
-[3]: https://travis-matrix-badges.herokuapp.com/repos/opencomponents/oc-template-react/branches/master/3
-[4]: https://travis-ci.org/opencomponents/oc-template-react
+---
 
 ## Packages included in this repo
 
-| Name | Version |
-|--------|-------|
-| [`oc-template-react`](/packages/oc-template-react) | [![npm version](https://badge.fury.io/js/oc-template-react.svg)](http://badge.fury.io/js/oc-template-react) |
-| [`oc-template-react-compiler`](/packages/oc-template-react-compiler) | [![npm version](https://badge.fury.io/js/oc-template-react-compiler.svg)](http://badge.fury.io/js/oc-template-react-compiler) |
-| [`oc-react-component-wrapper`](/packages/oc-react-component-wrapper) | [![npm version](https://badge.fury.io/js/oc-react-component-wrapper.svg)](http://badge.fury.io/js/oc-react-component-wrapper) |
-
+| Name                                                                                       | Version                                                                                                                                             |
+| ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`oc-template-typescript-react`](/packages/oc-template-typescript-react)                   | [![npm version](https://badge.fury.io/js/oc-template-typescript-react.svg)](http://badge.fury.io/js/oc-template-typescript-react)                   |
+| [`oc-template-typescript-react-compiler`](/packages/oc-template-typescript-react-compiler) | [![npm version](https://badge.fury.io/js/oc-template-typescript-react-compiler.svg)](http://badge.fury.io/js/oc-template-typescript-react-compiler) |
 
 ## Usage:
 
 Initialize a component with the oc-template-react and follow the CLI instructions
 
 ```
-$ oc init <your-component-name> oc-template-react
+$ npx oc init my-awesome-oc oc-template-typescript-react
+$ cd my-awesome-oc
+$ npm install
 ```
 
 ## Extra info:
+
+### Linting
+
+Like in [Create React App](https://create-react-app.dev/docs/setting-up-your-editor/#displaying-lint-output-in-the-editor), linting will be done during the build, and you can extend it from .eslintrc.json, by setting the EXTEND_ESLINT environment variable to true.
+
+It can also be disabled completely by setting the `DISABLE_ESLINT_PLUGIN` environment variable to `true`.
+
 ### package.json requirements
-- `template.src` - the react App entry point -  should export a react component as `default`
-- `template.type` -  `oc-template-react`
-- required in `devDependencies` -  `oc-template-react-compiler`
-### package.json optional
-- `template.externals` - override unpkg.com externals 
-```
-  "externals": [
-    {
-      "name": "Object.assign",
-      "global": [
-        "Object",
-        "assign"
-      ],
-      "url": "https://mydomain.com/[email protected]/dist/object-assign-auto.min.js"
-    },
-    {
-      "name": "prop-types",
-      "global": "PropTypes",
-      "url": "https://mydomain.com/[email protected]/prop-types.min.js"
-    },
-    {
-      "name": "react",
-      "global": "React",
-      "url": "https://mydomain.com/[email protected]/umd/react.production.min.js"
-    },
-    {
-      "name": "react-dom",
-      "global": "ReactDOM",
-      "url": "https://mydomain.com/[email protected]/umd/react-dom.production.min.js"
-    }
-  ]
-```
+
+- `template.src` - the react App entry point - should export a react component as `default`
+- `template.type` - `oc-template-typescript-react`
+- required in `devDependencies` - `oc-template-react-compiler`, `react`, `react-dom`, `@types/react`
 
 ### conventions
+
 - `props = server()` - the viewModel generated by the server is automatically passed to the react application as props
 - The oc-client-browser is extended and will now expose all the available react-component at `oc.reactComponents[bundleHash]`
 - You can register an event handler within the [oc.events](https://github.com/opentable/oc/wiki/Browser-client#oceventsoneventname-callback) system for the the `oc:componentDidMount` event. The event will be fired immediately after the react app is mounted.
 - You can register an event handler within the [oc.events](https://github.com/opentable/oc/wiki/Browser-client#oceventsoneventname-callback) system for the the `oc:cssDidMount` event. The event will be fired immediately after the style tag will be added to the active DOM tree.
 
 ### externals
+
 Externals are not bundled when packaging and publishing the component, for better size taking advantage of externals caching. OC will make sure to provide them at Server-Side & Client-Side rendering time for you.
+
 - React
 - ReactDOM
-- PropTypes
-
+
 ### features
+
 - `Server Side Rendering` = server side rendering should work as for any other OpenComponent
 - `css-modules` are supported.
+- `sass-modules` are supported (you need to install the `node-sass` dependency).
 - `post-css` is supported with the following plugins:
   - [postcss-import](https://github.com/postcss/postcss-import)
   - [postcss-extend](https://github.com/travco/postcss-extend)
   - [postcss-icss-values](https://github.com/css-modules/postcss-icss-values)
   - [autoprefixer](https://github.com/postcss/autoprefixer)
-- `White list dependencies` to be inlcuded in the build process done by the compiler. To whitelist dependencies installed in the node_modules folder, add in the package.json of the component a `buildIncludes` list:
-  ```json
-    ...
-    oc : {
-      files: {
-        template: {
-          ...
-          buildIncludes: ['react-components-to-build']
-        }
-      }
-    }
-  ```
-
-
 
 ## Utils
 
 The compiler exposes some utilities that could be used by your React application:
 
-### HOCs
+### Hooks
 
-#### withDataProvider
+#### useData
 
-An Higher order component that will make a `getData` function available via props.
+A hook that will make a `getData` function available via props, plus
+the initial data passed from the server to the component.
 
 ##### Usage:
 
 ```javascript
-import { withDataProvider } from 'oc-template-react-compiler/utils';
-
-const yourApp = props => {
-  // you can use props.getData here
+import { useData } from 'oc-template-typescript-react-compiler/utils/useData';
+
+const App = (props) => {
+  // getData and getSetting are always available
+  const { id, getData, getSetting } = useData<{ id: number }>();
+  const staticPath = getSetting('staticPath');
+
+  return (
+    <div>
+      <h1>Id: {id}</h1>
+      <img src={`${staticPath}/public/logo.png`} alt="Logo" />
+    </div>
+  )
 };
 
 yourEnhancedApp = withDataProvider(yourApp);
 ```
 
-`getData` accept two arguments: `(params, callback) => callback(err, result)`. It will perform a post back request to the component endpoint with the specified query perams invoking the callback with the results.
-
-For more details, check the [`example app`](/acceptance-components/react-app/app.js)
-
-#### withSettingProvider
-
-An Higher order component that will make a `getSetting` function available via props.
-
-##### Usage:
-
-```javascript
-import { withSettingProvider } from 'oc-template-react-compiler/utils';
-
-const yourApp = props => {
-  // you can use props.getSetting here
-};
-
-yourEnhancedApp = withSettingProvider(yourApp);
-```
+`getData` accept one argument: `(params) => Promise<result>`. It will perform a post back request to the component endpoint with the specified query perams invoking the callback with the results.
 
 `getSetting` accept one argument: `settingName => settingValue`. It will return the value for the requested setting.
 
 Settings available at the moment:
+
 - `getSetting('name')` : return the name of the OC component
 - `getSetting('version')` : return the version of the OC component
 - `getSetting('baseUrl')` : return the [baseUrl of the oc-registry](https://github.com/opentable/oc/wiki/The-server.js#context-properties)
 - `getSetting('staticPath')` : return the path to the [static assets](https://github.com/opentable/oc/wiki/The-server.js#add-static-resource-to-the-component) of the OC component
+
+For more details, check the [`example app`](/acceptance-components/react-app/app.js)
diff --git a/packages/oc-template-react-compiler/.prettierrc.js b/packages/oc-template-react-compiler/.prettierrc.js
@@ -0,0 +1 @@
+module.exports = require('prettier-config-guestline');
diff --git a/packages/oc-template-react-compiler/globals.d.ts b/packages/oc-template-react-compiler/globals.d.ts
@@ -0,0 +1,47 @@
+declare module 'oc-generic-template-compiler' {
+  type Callback<T> = (err: Error | null, data?: T) => void;
+  type CompiledViewInfo = any;
+
+  type OcOptions = {
+    files: {
+      data: string;
+      template: {
+        src: string;
+        type: string;
+      };
+      static: string[];
+    };
+  };
+
+  type Options = {
+    publishPath: string;
+    componentPath: string;
+    componentPackage: {
+      name: string;
+      version: string;
+      dependencies: Record<string, string>;
+      oc: OcOptions;
+    };
+    ocPackage: any;
+    minify: boolean;
+    verbose: boolean;
+    production: boolean;
+  };
+
+  type CompileServer = (
+    options: Options & { compiledViewInfo: CompiledViewInfo },
+    cb: Callback<any>
+  ) => void;
+  type CompileView = (options: Options, cb: Callback<CompiledViewInfo>) => void;
+  type CompileStatics = (options: Options, cb: Callback<'ok'>) => void;
+  type GetInfo = () => {
+    version: string;
+  };
+
+  export function createCompile(parameters: {
+    compileView: CompileView;
+    compileServer: CompileServer;
+    compileStatics: CompileStatics;
+    getInfo: GetInfo;
+  }): (options: Options, cb: Callback<any>) => void;
+}
diff --git a/packages/oc-template-react-compiler/lib/compile.js b/packages/oc-template-react-compiler/lib/compile.js
@@ -1,11 +1,21 @@
-"use strict";
+'use strict';
 
-const createCompile = require("oc-generic-template-compiler").createCompile;
-const compileStatics = require("oc-statics-compiler");
-const getInfo = require("oc-template-react").getInfo;
+const createCompile = require('oc-generic-template-compiler').createCompile;
+const compileStatics = require('oc-statics-compiler');
+const getInfo = require('oc-template-typescript-react').getInfo;
 
-const compileServer = require("./compileServer");
-const compileView = require("./compileView");
+const compileServer = require('./compileServer');
+const compileView = require('./compileView');
+const verifyTypeScriptSetup = require('./verifyConfig');
+
+const compiler = createCompile({
+  compileServer,
+  compileStatics,
+  compileView,
+  getInfo
+});
+
+const hasTsExtension = (file) => !!file.match(/\.tsx?$/);
 
 // OPTIONS
 // =======
@@ -18,9 +28,14 @@ const compileView = require("./compileView");
 // verbose,
 // watch,
 // production
-module.exports = createCompile({
-  compileServer,
-  compileStatics,
-  compileView,
-  getInfo
-});
+module.exports = function compile(options, callback) {
+  const viewFileName = options.componentPackage.oc.files.template.src;
+  const serverFileName = options.componentPackage.oc.files.data;
+  const usingTypescript = hasTsExtension(viewFileName) || hasTsExtension(serverFileName);
+
+  if (usingTypescript) {
+    verifyTypeScriptSetup(options.componentPath);
+  }
+
+  return compiler(options, callback);
+};