Merge pull request #15325 from lith-light-g/master

Added definitions for detect-port, react-router-config, and serialize-javascript. Updated react-helmet.

types/detect-port/detect-port-tests.ts

@@ -0,0 +1,23 @@
+import * as detect from "detect-port";
+
+const port: number = 8000;
+
+/**
+ * callback usage
+ */
+detect(port, (err: Error, _port: number) => {
+});
+
+
+function* yieldSyntax() {
+    const _port: number = yield detect(port);
+};
+
+/**
+ * use as a promise
+ */
+detect(port)
+    .then((_port: number) => {
+    })
+    .catch(err => {
+    });

types/detect-port/index.d.ts

@@ -0,0 +1,11 @@
+// Type definitions for detect-port 1.1
+// Project: https://github.com/node-modules/detect-port
+// Definitions by: François Nguyen <https://github.com/lith-light-g>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+interface DetectPort {
+    (port: number, callback: (err: Error, _port: number) => void): void;
+    (port: number): Promise<number>;
+}
+declare const detectPort: DetectPort;
+export = detectPort;

types/detect-port/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "target": "es2015",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "detect-port-tests.ts"
+    ]
+}

types/detect-port/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }

types/react-helmet/index.d.ts

@@ -1,48 +1,45 @@
-// Type definitions for react-helmet
+// Type definitions for react-helmet 5.0
 // Project: https://github.com/nfl/react-helmet
-// Definitions by: Evan Bremer <https://github.com/evanbb>, Isman Usoh <https://github.com/isman-usoh>
+// Definitions by: Evan Bremer <https://github.com/evanbb>, Isman Usoh <https://github.com/isman-usoh>, François Nguyen <https://github.com/lith-light-g>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.1
 
-/// <reference types="react" />
-
 import * as React from "react";
 
-declare function ReactHelmet(): ReactHelmet.HelmetComponent;
-
-declare namespace ReactHelmet {
-    function peek(): ReactHelmet.HelmetData;
-    function rewind(): ReactHelmet.HelmetData;
-
-    interface HelmetProps {
-        base?: any;
-        defaultTitle?: string;
-        htmlAttributes?: any;
-        link?: Array<any>;
-        meta?: Array<any>;
-        script?: Array<any>;
-        style?: Array<any>;
-        title?: string;
-        titleTemplate?: string;
-        onChangeClientState?: (newState: any) => void;
-    }
-
-    interface HelmetData {
-        base: HelmetDatum;
-        htmlAttributes: HelmetDatum;
-        link: HelmetDatum;
-        meta: HelmetDatum;
-        script: HelmetDatum;
-        style: HelmetDatum;
-        title: HelmetDatum;
-    }
-
-    interface HelmetDatum {
-        toString(): string;
-        toComponent(): React.Component<any, any>;
-    }
-
-    class HelmetComponent extends React.Component<HelmetProps, any> {}
+interface HelmetProps {
+    encodeSpecialCharacters?: boolean;
+    titleTemplate?: string;
+    defaultTitle?: string;
+    onChangeClientState?: (nextState: any) => any
 }
 
-export = ReactHelmet;
+export class Helmet extends React.Component<HelmetProps, any> {
+    static peek(): HelmetData;
+    static rewind(): HelmetData;
+    static renderStatic(): HelmetData;
+    static canUseDOM: boolean;
+}
+
+export interface HelmetData {
+    base: HelmetDatum;
+    bodyAttributes: HelmetDatum;
+    htmlAttributes: HelmetDatum;
+    link: HelmetDatum;
+    meta: HelmetDatum;
+    noscript: HelmetDatum;
+    script: HelmetDatum;
+    style: HelmetDatum;
+    title: HelmetDatum;
+    titleAttributes: HelmetDatum;
+}
+
+export interface HelmetDatum {
+    toString(): string;
+    toComponent(): React.Component<any, any>;
+}
+
+export const peek: () => HelmetData;
+export const rewind: () => HelmetData;
+export const renderStatic: () => HelmetData;
+export const canUseDOM: boolean;
+export default Helmet;

types/react-helmet/react-helmet-tests.tsx

@@ -1,18 +1,37 @@
-import * as React from 'react';
-import * as Helmet from 'react-helmet';
+import * as React from "react";
+import { Helmet, HelmetData } from "react-helmet";
 
-<Helmet title="My Title" />
+const Application = () =>
+    <div className="application">
+        <Helmet>
+            <meta charSet="utf-8" />
+            <title>My Title</title>
+            <link rel="canonical" href="http://mysite.com/example" />
+        </Helmet>
+        <Helmet>
+            <title>My Title</title>
+            <meta name="description" content="Helmet application" />
+        </Helmet>
+
+        <div>
+            <Helmet>
+                <title>Nested Title</title>
+                <meta name="description" content="Nested component" />
+            </Helmet>
+        </div>
+    </div>;
+
+const helmet: HelmetData = Helmet.renderStatic();
 
-const head = Helmet.rewind();
 const html = `
     <!doctype html>
-    <html>
+    <html ${helmet.htmlAttributes.toString()}>
         <head>
-            ${ head.title.toString() }
-            ${ head.meta.toString() }
-            ${ head.link.toString() }
+            <title>${helmet.title.toString()}</title>
+            ${helmet.meta.toString()}
+            ${helmet.link.toString()}
         </head>
-        <body>
+        <body ${helmet.bodyAttributes.toString()}>
             <div id="content">
                 // React stuff here
             </div>
@@ -21,24 +40,65 @@ const html = `
 `;
 
 function HTML() {
+    const htmlAttrs = helmet.htmlAttributes.toComponent();
+    const bodyAttrs = helmet.bodyAttributes.toComponent();
+
     return (
-        <html>
+        <html {...htmlAttrs}>
             <head>
-                { head.title.toComponent() }
-                { head.meta.toComponent() }
-                { head.link.toComponent() }
+                <title>{helmet.title.toComponent()}</title>
+                {helmet.meta.toComponent()}
+                {helmet.link.toComponent()}
             </head>
-            <body>
+            <body {...bodyAttrs}>
                 <div id="content">
-                    // React stuff here
                 </div>
             </body>
         </html>
     );
 }
 
-function log(datum: Helmet.HelmetDatum) {
-    return console.log('logging a helmet datum:', datum.toString());
-}
+<Helmet
+    encodeSpecialCharacters={true}
+    titleTemplate="MySite.com - %s"
 
-log(head.title);
+    defaultTitle="My Default Title"
+
+    onChangeClientState={(newState: any) => console.log(newState)}
+>
+    <html lang="en" />
+
+    <body className="root" />
+
+    <title itemProp="name" lang="en">My Title</title>
+
+    <base target="_blank" href="http://mysite.com/" />
+
+    <meta name="description" content="Helmet application" />
+    <meta property="og:type" content="article" />
+
+    <link rel="canonical" href="http://mysite.com/example" />
+    <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" />
+
+    <script src="http://include.com/pathtojs.js" type="text/javascript" />
+
+    <script type="application/ld+json">{`
+        {
+            "@context": "http://schema.org"
+        }
+    `}</script>
+
+    <noscript>{`
+        <link rel="stylesheet" type="text/css" href="foo.css" />
+    `}</noscript>
+
+    <style type="text/css">{`
+        body {
+            background-color: blue;
+        }
+        p {
+            font-size: 12px;
+        }
+    `}</style>
+</Helmet>

types/react-helmet/v4/index.d.ts

@@ -0,0 +1,48 @@
+// Type definitions for react-helmet 4.0
+// Project: https://github.com/nfl/react-helmet
+// Definitions by: Evan Bremer <https://github.com/evanbb>, Isman Usoh <https://github.com/isman-usoh>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
+
+/// <reference types="react" />
+
+import * as React from "react";
+
+declare function ReactHelmet(): ReactHelmet.HelmetComponent;
+
+declare namespace ReactHelmet {
+    function peek(): ReactHelmet.HelmetData;
+    function rewind(): ReactHelmet.HelmetData;
+
+    interface HelmetProps {
+        base?: any;
+        defaultTitle?: string;
+        htmlAttributes?: any;
+        link?: Array<any>;
+        meta?: Array<any>;
+        script?: Array<any>;
+        style?: Array<any>;
+        title?: string;
+        titleTemplate?: string;
+        onChangeClientState?: (newState: any) => void;
+    }
+
+    interface HelmetData {
+        base: HelmetDatum;
+        htmlAttributes: HelmetDatum;
+        link: HelmetDatum;
+        meta: HelmetDatum;
+        script: HelmetDatum;
+        style: HelmetDatum;
+        title: HelmetDatum;
+    }
+
+    interface HelmetDatum {
+        toString(): string;
+        toComponent(): React.Component<any, any>;
+    }
+
+    class HelmetComponent extends React.Component<HelmetProps, any> {}
+}
+
+export = ReactHelmet;

types/react-helmet/v4/react-helmet-tests.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as Helmet from 'react-helmet';
+
+<Helmet title="My Title" />
+
+const head = Helmet.rewind();
+const html = `
+    <!doctype html>
+    <html>
+        <head>
+            ${ head.title.toString() }
+            ${ head.meta.toString() }
+            ${ head.link.toString() }
+        </head>
+        <body>
+            <div id="content">
+                // React stuff here
+            </div>
+        </body>
+    </html>
+`;
+
+function HTML() {
+    return (
+        <html>
+            <head>
+                { head.title.toComponent() }
+                { head.meta.toComponent() }
+                { head.link.toComponent() }
+            </head>
+            <body>
+                <div id="content">
+                    // React stuff here
+                </div>
+            </body>
+        </html>
+    );
+}
+
+function log(datum: Helmet.HelmetDatum) {
+    return console.log('logging a helmet datum:', datum.toString());
+}
+
+log(head.title);

types/react-helmet/v4/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "baseUrl": "../../",
+        "jsx": "react",
+        "typeRoots": [
+            "../../"
+        ],
+        "paths": {
+            "react-helmet": [
+                "react-helmet/v4"
+            ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-helmet-tests.tsx"
+    ]
+}

types/react-router-config/index.d.ts

@@ -0,0 +1,31 @@
+// Type definitions for react-router-config 1.0
+// Project: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
+// Definitions by: François Nguyen <https://github.com/lith-light-g>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.2
+
+import * as React from "react";
+import { RouteComponentProps, match } from "react-router";
+import { Location } from "history";
+
+export interface RouteConfigComponentProps<T> extends RouteComponentProps<T> {
+    route?: RouteConfig;
+}
+
+export interface RouteConfig {
+    location?: Location;
+    component?: React.SFC<RouteConfigComponentProps<any> | void> | React.ComponentClass<RouteConfigComponentProps<any> | void>;
+    path?: string;
+    exact?: boolean;
+    strict?: boolean;
+    routes?: RouteConfig[];
+}
+
+export interface MatchedRoute<T> {
+    route: RouteConfig;
+    match: match<T>
+}
+
+export function matchRoutes<T>(routes: RouteConfig[], pathname: string): MatchedRoute<T>[];
+
+export function renderRoutes(routes: RouteConfig[] | undefined): JSX.Element;

types/react-router-config/react-router-config-tests.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { RouteConfig, matchRoutes, MatchedRoute, renderRoutes, RouteConfigComponentProps } from "react-router-config";
+import { BrowserRouter } from "react-router-dom";
+
+const Root = ({ route }: RouteConfigComponentProps<void>) => (
+    <div>
+        <h1>Root</h1>
+        {/* child routes won't render without this */}
+        {renderRoutes(route && route.routes)}
+    </div>
+)
+
+const Home = ({ route }: RouteConfigComponentProps<void>) => (
+    <div>
+        <h2>Home</h2>
+    </div>
+)
+
+const Child = ({ route }: RouteConfigComponentProps<void>) => (
+    <div>
+        <h2>Child</h2>
+        {/* child routes won't render without this */}
+        {renderRoutes(route && route.routes)}
+    </div>
+)
+
+const GrandChild = () => (
+    <div>
+        <h3>Grand Child</h3>
+    </div>
+)
+
+// route config
+const routes: RouteConfig[] = [
+    {
+        component: Root,
+        routes: [
+            {
+                path: "/",
+                exact: true,
+                component: Home
+            },
+            {
+                path: "/child/:id",
+                component: Child,
+                routes: [{
+
+                    path: "/child/:id/grand-child",
+                    component: GrandChild
+                }]
+            }
+        ]
+    }
+];
+
+const branch: MatchedRoute<{}>[] = matchRoutes<{}>(routes, "/child/23");
+// using the routes shown earlier, this returns
+// [
+//   routes[0],
+//   routes[0].routes[1]
+// ]
+
+// pass this into ReactDOM.render
+<BrowserRouter>{renderRoutes(routes)}</BrowserRouter>;

types/react-router-config/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "preserve"
+    },
+    "files": [
+        "index.d.ts",
+        "react-router-config-tests.tsx"
+    ]
+}

types/react-router-config/tslint.json

@@ -0,0 +1,6 @@
+{
+    "extends": "../tslint.json",
+    "rules": {
+        "void-return": false
+    }
+}

types/serialize-javascript/index.d.ts

@@ -0,0 +1,29 @@
+// Type definitions for serialize-javascript 1.3
+// Project: https://github.com/yahoo/serialize-javascript
+// Definitions by: François Nguyen <https://github.com/lith-light-g>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace serializeJavascript {
+    interface SerializeJSOptions {
+        /**
+         * This option is the same as the space argument that can be passed to JSON.stringify.
+         * It can be used to add whitespace and indentation to the serialized output to make it more readable.
+         */
+        space?: string | number | undefined;
+        /** 
+         * This option is a signal to serialize() that the object being serialized does not contain any function or regexps values. 
+         * This enables a hot-path that allows serialization to be over 3x faster. 
+         * If you're serializing a lot of data, and know its pure JSON, then you can enable this option for a speed-up.
+         */
+        isJSON?: boolean;
+    }
+}
+
+/**
+ * Serialize JavaScript to a superset of JSON that includes regular expressions and functions.
+ * @param {any} input data to serialize
+ * @param {serializeJavascript.SerializeJSOptions} options optional object
+ * @returns {string} serialized data
+ */
+declare function serializeJavascript(input: any, options?: serializeJavascript.SerializeJSOptions): string;
+export = serializeJavascript;

types/serialize-javascript/serialize-javascript-tests.ts

@@ -0,0 +1,19 @@
+import * as serialize from "serialize-javascript";
+
+const obj: any = {
+    str: "string",
+    num: 0,
+    obj: { foo: "foo" },
+    arr: [1, 2, 3],
+    bool: true,
+    nil: null,
+    undef: undefined,
+
+    fn: function echo(arg: any) { return arg; },
+    re: /([^\s]+)/g
+};
+
+serialize(obj);
+serialize(obj, { space: 2 });
+serialize(obj, { space: "\t" });
+serialize(obj, { isJSON: true });

types/serialize-javascript/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "serialize-javascript-tests.ts"
+    ]
+}

types/serialize-javascript/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }