fix(hydrate): change type resolve order (#5863)

* fix(hydrate): change type resolve order

* prettier

* use custom stencil config for building end-to-end tests

* prettier

Author: christian-bromann

src/hydrate/runner/render.ts

@@ -24,12 +24,12 @@ export function streamToString(html: string | any, option?: SerializeDocumentOpt
   return renderToString(html, option, true);
 }
 
+export function renderToString(html: string | any, options?: SerializeDocumentOptions): Promise<HydrateResults>;
 export function renderToString(
   html: string | any,
   options: SerializeDocumentOptions | undefined,
   asStream: true,
 ): Readable;
-export function renderToString(html: string | any, options?: SerializeDocumentOptions): Promise<HydrateResults>;
 export function renderToString(
   html: string | any,
   options?: SerializeDocumentOptions,
@@ -56,12 +56,12 @@ export function renderToString(
   return hydrateDocument(html, opts, asStream);
 }
 
+export function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
 export function hydrateDocument(
   doc: any | string,
   options: HydrateDocumentOptions | undefined,
   asStream?: boolean,
 ): Readable;
-export function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
 export function hydrateDocument(
   doc: any | string,
   options?: HydrateDocumentOptions,

test/end-to-end/package.json

@@ -6,7 +6,7 @@
   "types": "dist/types/components.d.ts",
   "collection": " dist/collection/collection-manifest.json",
   "scripts": {
-    "build": "node ../../bin/stencil build --docs",
+    "build": "node ../../bin/stencil build --config ./stencil.build.config.ts --docs",
     "start": "node ../../bin/stencil build --debug --watch --dev --serve",
     "test": "node ../../bin/stencil test --ci --e2e --spec --screenshot --debug",
     "test.dist": "npm run build && node test-end-to-end-dist.js && node test-end-to-end-hydrate.js",

test/end-to-end/src/declarative-shadow-dom/test.e2e.ts

@@ -29,13 +29,27 @@ async function readableToString(readable: Readable) {
 type HydrateModule = typeof import('../../hydrate');
 let renderToString: HydrateModule['renderToString'];
 let streamToString: HydrateModule['streamToString'];
+let hydrateDocument: HydrateModule['hydrateDocument'];
 
 describe('renderToString', () => {
   beforeAll(async () => {
     // @ts-ignore may not be existing when project hasn't been built
     const mod = await import('../../hydrate');
     renderToString = mod.renderToString;
     streamToString = mod.streamToString;
+    hydrateDocument = mod.hydrateDocument;
+  });
+
+  it('resolves to a Promise<HydrateResults> by default', async () => {
+    const renderedString = renderToString('<div>Hello World</div>');
+    expect(typeof renderedString.then).toBe('function');
+    // this is a type assertion to verify that the promise resolves to a HydrateResults object
+    renderedString.then((result) => result.html);
+
+    const renderedDocument = hydrateDocument('<div>Hello World</div>');
+    expect(typeof renderedDocument.then).toBe('function');
+    // this is a type assertion to verify that the promise resolves to a HydrateResults object
+    renderedDocument.then((result) => result.html);
   });
 
   it('can render a simple dom node', async () => {

test/end-to-end/stencil.build.config.ts

@@ -0,0 +1,9 @@
+import { config as baseConfig } from './stencil.config';
+
+/**
+ * We are using a slightly different tsconfig to build the end-to-end tests
+ * as we are doing type assertions on the hydrate module which is not available
+ * when the project hasn't been built.
+ */
+baseConfig.tsconfig = './tsconfig.build.json';
+export const config = baseConfig;

test/end-to-end/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  /**
+    * Exclude the test where we do type assertions using the hydrate module
+    * which doesn't exist at build time.
+    */
+  "exclude": ["src/declarative-shadow-dom/test.e2e.ts"]
+}