Basic setup

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/.cache-loader

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Framer B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -0,0 +1,25 @@
+###### This is coming from our shared.mk in the FramerStudio repo
+
+# Include node modules in the path
+PATH := $(CURDIR)/node_modules/.bin:$(PATH)
+
+# Use a modern shell
+SHELL := /bin/bash
+
+# Update node modules if package.json is newer than node_modules or yarn lockfile
+# Use a mutex file so multiple Source dirs can be built in parallel.
+node_modules/.yarn-integrity: yarn.lock package.json
+	yarn install --mutex network
+	touch $@
+
+bootstrap:: node_modules/.yarn-integrity
+
+######
+
+dev: bootstrap
+	webpack-dev-server --config=dev/webpack/config.js
+
+lint: bootstrap
+	tslint --project tsconfig.json
+
+.PHONY: dev lint

dev/examples/test.tsx

@@ -0,0 +1,9 @@
+import * as React from "react"
+
+import { Test } from "@framer"
+
+export class App extends React.Component {
+    render() {
+        return <Test />
+    }
+}

dev/examples/tslint.json

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

dev/webpack/config.js

@@ -0,0 +1,28 @@
+const path = require("path")
+const config = require("../../webpack.config")
+const webpack = require("webpack")
+const chalk = require("chalk")
+
+const DEV_SERVER_PORT = 9990
+
+console.log(chalk.bold.green(`\nRunning at: http://0.0.0.0:${DEV_SERVER_PORT}/\n`))
+
+config.entry = {
+    framer: [
+        "react-dev-utils/webpackHotDevClient",
+        path.join(__dirname, "..", "..", "src", "loader"),
+        path.join(__dirname, "index"),
+    ],
+}
+
+config.devServer = {
+    contentBase: path.join(__dirname),
+    hot: false,
+    inline: false,
+    // quiet: true,
+    // open: true,
+    // openPage: "/",
+    stats: "errors-only",
+    port: DEV_SERVER_PORT,
+}
+Object.assign(exports, config)

dev/webpack/examples.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { basename, extname } from "path"
+
+const context = require["context"]("../examples", true, /\.(tsx?)$/)
+
+const fileName = (pathName: string) => {
+    return basename(pathName, extname(pathName))
+}
+
+const style: React.CSSProperties = {
+    font: "16px/1.6em 'Helvetica Neue'",
+    textRendering: "optimizeLegibility",
+    margin: "64px",
+}
+
+const Code: React.SFC = props => {
+    return <span style={{ fontFamily: "Menlo", color: "grey", fontSize: "90%" }}>{props.children}</span>
+}
+
+const ExampleList = () => {
+    return (
+        <div style={style}>
+            <h2>Framer Examples</h2>
+            <p>
+                You can edit any of these in the <Code>dev/examples</Code> folder.
+            </p>
+            <ul>
+                {context.keys().map((name: string) => (
+                    <li key={name}>
+                        <a href={`?example=${fileName(name)}`}>{fileName(name)}</a>{" "}
+                        <Code>{name.replace("./", "examples/")}</Code>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export class App extends React.Component {
+    render() {
+        const url = new URL(window.location.href)
+        const example = url.searchParams.get("example")
+
+        if (!example) {
+            return <ExampleList />
+        }
+
+        const exampleName = fileName(example)
+        const exampleApp = require(`../examples/${exampleName}`)
+
+        if (exampleApp) {
+            if (exampleApp.App) {
+                // Update the document title to the example
+                document.title = exampleName
+
+                return React.createElement(exampleApp.App)
+            } else {
+                return (
+                    <p>
+                        <Code>examples/{example}</Code> does not have a export named <Code>App</Code>
+                    </p>
+                )
+            }
+        }
+
+        return <ExampleList />
+    }
+}

dev/webpack/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Framer Development</title>
+    <script src="react.development.js"></script>
+    <script src="react-dom.development.js"></script>
+</head>
+
+<body style="margin: 0">
+    <div id="root"></div>
+    <script src="framer.debug.js"></script>
+</body>
+
+</html>

dev/webpack/index.tsx

@@ -0,0 +1,6 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+
+const App = require("./examples").App
+
+ReactDOM.render(<App />, document.getElementById("root"))

dev/webpack/react-dom.development.js

@@ -0,0 +1 @@
+../../node_modules/react-dom/umd/react-dom.development.js

dev/webpack/react.development.js

@@ -0,0 +1 @@
+../../node_modules/react/umd/react.development.js

package.json

@@ -0,0 +1,38 @@
+{
+    "name": "framer",
+    "version": "0.0.1",
+    "main": "build/framer.js",
+    "types": "build/framer.d.ts",
+    "author": "Framer Motion",
+    "license": "MIT",
+    "scripts": {
+        "coverage": "jest --config jest.json --coverage",
+        "test": "jest --config jest.json",
+        "watch": "jest --config jest.json --watch"
+    },
+    "peerDependencies": {
+        "react": "^16.7",
+        "react-dom": "^16.7"
+    },
+    "devDependencies": {
+        "@types/node": "^10.12.9",
+        "@types/react": "^16.7.6",
+        "@types/react-dom": "^16.0.9",
+        "cache-loader": "^1.2.5",
+        "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2",
+        "fork-ts-checker-webpack-plugin": "^0.4.15",
+        "progress-bar-webpack-plugin": "^1.11.0",
+        "react": "^16.7.0-alpha.2",
+        "ts-loader": "^5.3.0",
+        "tslint": "^5.11.0",
+        "tslint-microsoft-contrib": "^5.2.1",
+        "typescript": "^3.1.6",
+        "webpack": "^4.25.1",
+        "webpack-cli": "^3.1.2",
+        "webpack-dev-server": "^3.1.10"
+    },
+    "dependencies": {
+        "react-dev-utils": "^6.1.1",
+        "react-dom": "^16.7.0-alpha.2"
+    }
+}

src/index.ts

@@ -0,0 +1 @@
+export { Test } from "./test"

src/loader.ts

@@ -0,0 +1,13 @@
+// This is the main entry in webpack and runs checks if we are stup correctly
+
+import * as React from "react"
+
+if (!React) {
+    throw Error("Framer needs React as an external dependency.")
+}
+
+import * as ReactDOM from "react-dom"
+
+if (!ReactDOM) {
+    throw Error("Framer needs ReactDOM as an external dependency.")
+}

src/test.tsx

@@ -0,0 +1,5 @@
+import * as React from "react"
+
+export const Test = () => {
+    return <div>Hello world</div>
+}

tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "target": "es2015",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "isolatedModules": false,
+        "jsx": "react",
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
+        "declaration": true,
+        "declarationDir": "types",
+        "noLib": false,
+        "preserveConstEnums": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "outDir": "build",
+        "sourceMap": true,
+        "baseUrl": "src",
+        "paths": {
+            "@framer": ["../src/index"],
+            "@framer/*": ["../src/*"]
+        },
+        "strictNullChecks": true,
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "noImplicitUseStrict": false,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "removeComments": true
+    },
+    "compileOnSave": false,
+    "buildOnSave": false,
+    "exclude": ["node_modules", "build", "**/__tests__/*", "types", "dev/examples.framer", "test", "skins", "dist"],
+    "filesGlob": ["./src/**/*.ts"]
+}

tslint.json

@@ -0,0 +1,42 @@
+{
+    "rulesDirectory": ["./node_modules/tslint-microsoft-contrib"],
+    "rules": {
+        "arrow-return-shorthand": true,
+        "ban-comma-operator": true,
+        "class-name": true,
+        "comment-format": [true, "check-space"],
+        "curly": [true, "ignore-same-line"],
+        "indent": [true, "spaces"],
+        "no-console": true,
+        "no-default-export": true,
+        "no-duplicate-variable": true,
+        "no-eval": true,
+        "no-internal-module": true,
+        "no-return-await": true,
+        "no-shadowed-variable": true,
+        "no-string-throw": true,
+        "no-trailing-whitespace": true,
+        "no-unnecessary-bind": true,
+        "no-var-keyword": true,
+        "one-line": [true, "check-open-brace", "check-whitespace"],
+        "prefer-const": true,
+        "quotemark": [true, "double", "avoid-escape"],
+        "react-this-binding-issue": true,
+        "react-unused-props-and-state": true,
+        "semicolon": [true, "never"],
+        "triple-equals": [true],
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-isnan": true,
+        "variable-name": [true, "ban-keywords"],
+        "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-type"]
+    }
+}