feat(config): env (#2732)

ionic-team · Nov 6, 2020 · ab6dff1 · ab6dff1
1 parent 26485db
commit ab6dff1
Show file tree

Hide file tree

Showing 20 changed files with 122 additions and 4 deletions.
diff --git a/src/app-data/index.ts b/src/app-data/index.ts
@@ -83,4 +83,6 @@ export const BUILD: BuildConditionals = {
   attachStyles: true,
 };
 
+export const Env = {};
+
 export const NAMESPACE = /* default */ 'app' as string;
diff --git a/src/client/index.ts b/src/client/index.ts
@@ -7,4 +7,4 @@ export * from './client-style';
 export * from './client-task-queue';
 export * from './client-build';
 export * from '@runtime';
-export { BUILD, NAMESPACE } from '@app-data';
+export { BUILD, NAMESPACE, Env } from '@app-data';
diff --git a/src/compiler/bundle/app-data-plugin.ts b/src/compiler/bundle/app-data-plugin.ts
@@ -57,6 +57,7 @@ export const appDataPlugin = (
         const s = new MagicString(``);
         appendNamespace(config, s);
         appendBuildConditionals(config, build, s);
+        appendEnv(config, s);
         return s.toString();
       }
       return null;
@@ -149,6 +150,10 @@ const appendBuildConditionals = (config: d.Config, build: d.BuildConditionals, s
   s.append(`export const BUILD = /* ${config.fsNamespace} */ { ${builData} };\n`);
 };
 
+const appendEnv = (config: d.Config, s: MagicString) => {
+  s.append(`export const Env = /* ${config.fsNamespace} */ ${JSON.stringify(config.env) };\n`);
+};
+
 const appendNamespace = (config: d.Config, s: MagicString) => {
   s.append(`export const NAMESPACE = '${config.fsNamespace}';\n`);
 };

diff --git a/src/compiler/config/validate-config.ts b/src/compiler/config/validate-config.ts
@@ -75,6 +75,9 @@ export const validateConfig = (userConfig?: Config) => {
     const err = buildError(diagnostics);
     err.messageText = `config.hashedFileNameLength cannot be more than ${MAX_HASHED_FILENAME_LENTH} characters`;
   }
+  if (!config.env) {
+    config.env = {};
+  }
 
   // get a good namespace
   validateNamespace(config, diagnostics);

diff --git a/src/compiler/transformers/update-stencil-core-import.ts b/src/compiler/transformers/update-stencil-core-import.ts
@@ -61,6 +61,7 @@ const KEEP_IMPORTS = new Set([
   'setMode',
   'getMode',
   'Build',
+  'Env',
   'Host',
   'Fragment',
   'getAssetPath',

diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -2213,6 +2213,7 @@ export interface JestEnvironmentGlobal {
     fullName: string;
     testPath: string;
   };
+  env: {[prop: string]: string};
   screenshotDescriptions: Set<string>;
 }
 
@@ -2224,6 +2225,7 @@ export interface E2EProcessEnv {
   STENCIL_SCREENSHOT_SERVER?: string;
 
   __STENCIL_EMULATE_CONFIGS__?: string;
+  __STENCIL_ENV__?: string;
   __STENCIL_EMULATE__?: string;
   __STENCIL_BROWSER_URL__?: string;
   __STENCIL_APP_SCRIPT_URL__?: string;

diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts
@@ -196,6 +196,11 @@ export interface StencilConfig {
    */
   taskQueue?: 'async' | 'immediate' | 'congestionAsync';
 
+  /**
+   * Provide a object of key/values accessible within the app, using the `Env` object.
+   */
+  env?: {[prop: string]: string | undefined};
+
   globalScript?: string;
   srcIndexHtml?: string;
   watch?: boolean;

diff --git a/src/declarations/stencil-public-runtime.ts b/src/declarations/stencil-public-runtime.ts
@@ -178,6 +178,11 @@ export interface UserBuildConditionals {
  */
 export declare const Build: UserBuildConditionals;
 
+/**
+ * The `Env` object provides access to the "env" object declared in the project's `stencil.config.ts`.
+ */
+export declare const Env: {[prop: string]: string | undefined};
+
 /**
  * The `@Component()` decorator is used to provide metadata about the component class.
  * https://stenciljs.com/docs/component

diff --git a/src/hydrate/platform/index.ts b/src/hydrate/platform/index.ts
@@ -140,7 +140,7 @@ export const Build: d.UserBuildConditionals = {
 export const styles: d.StyleMap = new Map();
 export const modeResolutionChain: d.ResolutionHandler[] = [];
 
-export { BUILD, NAMESPACE } from '@app-data';
+export { BUILD, NAMESPACE, Env } from '@app-data';
 export { hydrateApp } from './hydrate-app';
 
 export {

diff --git a/src/internal/stencil-core/index.d.ts b/src/internal/stencil-core/index.d.ts
@@ -35,6 +35,7 @@ export {
   forceUpdate,
   h,
   Host,
+  Env,
   Listen,
   Method,
   Prop,

diff --git a/src/runtime/test/globals.spec.tsx b/src/runtime/test/globals.spec.tsx
@@ -1,4 +1,4 @@
-import { Component, Build } from '@stencil/core';
+import { Component, Build, Env } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 describe('globals', () => {
@@ -37,6 +37,11 @@ describe('globals', () => {
     expect(Build.isTesting).toBe(true);
   });
 
+
+  it('Env is defined', () => {
+    expect(Env).toEqual({});
+  });
+
   describe('globals/prototypes', () => {
     let page: any;
     beforeEach(async () => {

diff --git a/src/testing/jest/jest-runner.ts b/src/testing/jest/jest-runner.ts
@@ -10,6 +10,7 @@ export async function runJest(config: d.Config, env: d.E2EProcessEnv) {
     // set all of the emulate configs to the process.env to be read later on
     const emulateConfigs = getEmulateConfigs(config.testing, config.flags);
     env.__STENCIL_EMULATE_CONFIGS__ = JSON.stringify(emulateConfigs);
+    env.__STENCIL_ENV__ = JSON.stringify(config.env);
 
     if (config.flags.ci || config.flags.e2e) {
       env.__STENCIL_DEFAULT_TIMEOUT__ = '30000';

diff --git a/src/testing/jest/jest-setup-test-framework.ts b/src/testing/jest/jest-setup-test-framework.ts
@@ -1,5 +1,5 @@
 import type * as d from '@stencil/core/internal';
-import { BUILD } from '@app-data';
+import { BUILD, Env } from '@app-data';
 import { expectExtend } from '../matchers';
 import { setupGlobal, teardownGlobal } from '@stencil/core/mock-doc';
 import { setupMockFetch } from '../mock-fetch';
@@ -55,4 +55,8 @@ export function jestSetupTestFramework() {
     jest.setTimeout(time * 1.5);
     jasmine.DEFAULT_TIMEOUT_INTERVAL = time;
   }
+  if (typeof env.__STENCIL_ENV__ === 'string') {
+    const stencilEnv = JSON.parse(env.__STENCIL_ENV__);
+    Object.assign(Env, stencilEnv);
+  }
 }
diff --git a/src/testing/platform/index.ts b/src/testing/platform/index.ts
@@ -1,4 +1,5 @@
 export { Build } from './testing-build';
+export { Env } from '@app-data';
 export { consoleDevError, consoleDevInfo, consoleDevWarn, consoleError } from './testing-log';
 export {
   Context,

diff --git a/test/end-to-end/src/components.d.ts b/test/end-to-end/src/components.d.ts
@@ -26,6 +26,8 @@ export namespace Components {
     }
     interface ElementCmp {
     }
+    interface EnvData {
+    }
     interface EventCmp {
         "methodThatFiresEventWithOptions": () => Promise<void>;
         "methodThatFiresMyDocumentEvent": () => Promise<void>;
@@ -112,6 +114,12 @@ declare global {
         prototype: HTMLElementCmpElement;
         new (): HTMLElementCmpElement;
     };
+    interface HTMLEnvDataElement extends Components.EnvData, HTMLStencilElement {
+    }
+    var HTMLEnvDataElement: {
+        prototype: HTMLEnvDataElement;
+        new (): HTMLEnvDataElement;
+    };
     interface HTMLEventCmpElement extends Components.EventCmp, HTMLStencilElement {
     }
     var HTMLEventCmpElement: {
@@ -187,6 +195,7 @@ declare global {
         "dom-interaction": HTMLDomInteractionElement;
         "dom-visible": HTMLDomVisibleElement;
         "element-cmp": HTMLElementCmpElement;
+        "env-data": HTMLEnvDataElement;
         "event-cmp": HTMLEventCmpElement;
         "import-assets": HTMLImportAssetsElement;
         "listen-cmp": HTMLListenCmpElement;
@@ -221,6 +230,8 @@ declare namespace LocalJSX {
     }
     interface ElementCmp {
     }
+    interface EnvData {
+    }
     interface EventCmp {
         "onMy-event-with-options"?: (event: CustomEvent<{ mph: number }>) => void;
         "onMyDocumentEvent"?: (event: CustomEvent<any>) => void;
@@ -264,6 +275,7 @@ declare namespace LocalJSX {
         "dom-interaction": DomInteraction;
         "dom-visible": DomVisible;
         "element-cmp": ElementCmp;
+        "env-data": EnvData;
         "event-cmp": EventCmp;
         "import-assets": ImportAssets;
         "listen-cmp": ListenCmp;
@@ -289,6 +301,7 @@ declare module "@stencil/core" {
             "dom-interaction": LocalJSX.DomInteraction & JSXBase.HTMLAttributes<HTMLDomInteractionElement>;
             "dom-visible": LocalJSX.DomVisible & JSXBase.HTMLAttributes<HTMLDomVisibleElement>;
             "element-cmp": LocalJSX.ElementCmp & JSXBase.HTMLAttributes<HTMLElementCmpElement>;
+            "env-data": LocalJSX.EnvData & JSXBase.HTMLAttributes<HTMLEnvDataElement>;
             "event-cmp": LocalJSX.EventCmp & JSXBase.HTMLAttributes<HTMLEventCmpElement>;
             "import-assets": LocalJSX.ImportAssets & JSXBase.HTMLAttributes<HTMLImportAssetsElement>;
             "listen-cmp": LocalJSX.ListenCmp & JSXBase.HTMLAttributes<HTMLListenCmpElement>;

diff --git a/test/end-to-end/src/env-data/env-data.e2e.ts b/test/end-to-end/src/env-data/env-data.e2e.ts
@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('build-data e2e', () => {
+  it('should navigate to the index.html page w/out url searchParams', async () => {
+    // create a new puppeteer page
+    // and go to the root webpage
+    const page = await newE2EPage({
+      html: `<build-data></build-data>`,
+    });
+    const element = await page.find('build-data');
+    expect(element).toEqualHtml(`
+      <build-data custom-hydrate-flag="">
+        <p>isDev: true</p>
+        <p>isBrowser: true</p>
+        <p>isTesting: true</p>
+      </build-data>
+    `);
+  });
+});
diff --git a/test/end-to-end/src/env-data/env-data.spec.ts b/test/end-to-end/src/env-data/env-data.spec.ts
@@ -0,0 +1,20 @@
+import { EnvData } from './env-data';
+import { newSpecPage } from '@stencil/core/testing';
+
+
+describe('env-data', () => {
+
+  it('should be a test', async () => {
+    const {root} = await newSpecPage({
+      components: [EnvData],
+      html: `<env-data></env-data>`
+    });
+    expect(root).toEqualHtml(`
+      <env-data>
+        <p>foo: bar</p>
+        <p>HOST: example.com</p>
+      </env-data>
+    `);
+  });
+
+});
diff --git a/test/end-to-end/src/env-data/env-data.tsx b/test/end-to-end/src/env-data/env-data.tsx
@@ -0,0 +1,17 @@
+import { Component, h, Env, Host } from '@stencil/core';
+
+
+@Component({
+  tag: 'env-data'
+})
+export class EnvData {
+
+  render() {
+    return (
+      <Host>
+        <p>foo: {Env.foo}</p>
+        <p>HOST: {Env.HOST}</p>
+      </Host>
+    );
+  }
+}
diff --git a/test/end-to-end/src/env-data/readme.md b/test/end-to-end/src/env-data/readme.md
@@ -0,0 +1,10 @@
+# env-data
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/test/end-to-end/stencil.config.ts b/test/end-to-end/stencil.config.ts
@@ -55,6 +55,10 @@ export const config: Config = {
     initialValue: '0',
     hydratedValue: '1',
   },
+  env: {
+    'foo': 'bar',
+    'HOST': 'example.com'
+  },
   enableCache: false,
   hashFileNames: false,
   buildEs5: 'prod',