Get that preact support!

.travis.yml

@@ -8,6 +8,7 @@ cache: yarn
 script:
   - npm run danger
   - npm test
+  - npm run test-preact
   - coveralls < ./coverage/lcov.info || true # ignore coveralls error
   - npm run compile
   - npm run filesize

jest.preact.config.json

@@ -0,0 +1,24 @@
+{
+  "testEnvironment": "jsdom",
+  "transform": {
+    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.jsx?$": "babel-jest"
+  },
+  "mapCoverage": true,
+  "moduleFileExtensions": ["ts", "tsx", "js", "json"],
+  "modulePathIgnorePatterns": [
+    "<rootDir>/examples",
+    "<rootDir>/test/flow-usage.js",
+    "<rootDir>/test/typescript-usage.tsx",
+    "<rootDir>/test/client/",
+    "<rootDir>/test/parser.test.ts/",
+    "<rootDir>/test/test-utils.test.tsx"
+  ],
+  "projects": ["<rootDir>"],
+  "testRegex": "(/test/(?!test-utils\b)\b.*|\\.(test|spec))\\.(ts|tsx|js)$",
+  "moduleNameMapper": {
+    "^react$": "preact-compat",
+    "react-dom$": "preact-compat",
+    "react-dom/server": "preact-compat/server"
+  }
+}

package.json

@@ -9,6 +9,7 @@
     "test": "npm run lint && npm run type-check && npm run jest",
     "jest": "jest --maxWorkers=4 --coverage",
     "test-watch": "jest --watch",
+    "test-preact": "jest --config ./jest.preact.config.json --no-cache",
     "filesize": "bundlesize",
     "type-check": "tsc --project tsconfig.json --noEmit && flow check",
     "precompile": "rimraf lib && rimraf npm",
@@ -100,6 +101,8 @@
     "jsdom": "11.5.1",
     "lint-staged": "6.0.0",
     "pre-commit": "1.2.2",
+    "preact": "^8.2.7",
+    "preact-compat": "^3.17.0",
     "prettier": "1.10.2",
     "react": "16.2.0",
     "react-dom": "16.2.0",

src/getDataFromTree.ts

@@ -19,6 +19,17 @@ export interface QueryTreeResult<Cache> {
   context: Context<Cache>;
 }
 
+interface PreactElement {
+  attributes: any;
+}
+
+function getProps(element: ReactElement<any> | PreactElement): any {
+  return (
+    (element as ReactElement<any>).props ||
+    (element as PreactElement).attributes
+  );
+}
+
 // Recurse a React Element tree, running visitor on each element.
 // If visitor returns `false`, don't call the element's render function
 //   or recurse into its child elements
@@ -42,19 +53,19 @@ export function walkTree<Cache>(
   const Component = element.type;
   // a stateless functional component or a class
   if (typeof Component === 'function') {
-    const props = assign({}, Component.defaultProps, element.props);
+    const props = assign({}, Component.defaultProps, getProps(element));
     let childContext = context;
     let child;
 
     // Are we are a react class?
     //   https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L66
-    if (Component.prototype && Component.prototype.isReactComponent) {
+    if (Component.prototype && Component.prototype.render) {
       // typescript force casting since typescript doesn't have definitions for class
       // methods
       const _component = Component as any;
       const instance = new _component(props, context);
       // In case the user doesn't pass these to super in the constructor
-      instance.props = instance.props || props;
+      instance.props = instance.props || instance.attributes || props;
       instance.context = instance.context || context;
       // set the instance state to null (not undefined) if not set, to match React behaviour
       instance.state = instance.state || null;

src/index.js.flow

@@ -87,7 +87,10 @@ export interface OptionProps<TProps, TResult> {
   mutate: MutationFunc<TResult>;
 }
 
-export type OptionDescription<P> = QueryOpts | MutationOpts | ((props: P) => QueryOpts | MutationOpts);
+export type OptionDescription<P> =
+  | QueryOpts
+  | MutationOpts
+  | ((props: P) => QueryOpts | MutationOpts);
 
 export type NamedProps<P, R> = P & {
   ownProps: R,

test/server/getDataFromTree.test.tsx

@@ -90,6 +90,7 @@ describe('SSR', () => {
 
       it('functional stateless components with children', () => {
         let elementCount = 0;
+        let isPreact = false;
         interface Props {
           n: number;
           children?: React.ReactNode;
@@ -106,10 +107,20 @@ describe('SSR', () => {
           </MyComponent>,
           {},
           element => {
+            if (element && (element as any).preactCompatUpgraded) {
+              isPreact = true;
+            }
             elementCount += 1;
           },
         );
-        expect(elementCount).toEqual(9);
+        // preact does a slightly different pass than react does here
+        // fwiw, preact's seems to make sense here (7 nodes vs 9)
+        // XXX verify markup checksums on this
+        if (isPreact) {
+          expect(elementCount).toEqual(7);
+        } else {
+          expect(elementCount).toEqual(9);
+        }
       });
 
       it('functional stateless components with null children', () => {
@@ -706,7 +717,14 @@ describe('SSR', () => {
     it('should correctly initialize an empty state to null', () => {
       class Element extends React.Component<any, any> {
         render() {
-          expect(this.state).toBeNull();
+          // this is a check for how react and preact differ. Preact (nicely)
+          // comes with a default state
+          if ((this as any).__d) {
+            // I'm preact
+            expect(this.state).toEqual({});
+          } else {
+            expect(this.state).toBeNull();
+          }
           return null;
         }
       }