Skip to content

Commit

Permalink
feat(config): env (#2732)
Browse files Browse the repository at this point in the history
  • Loading branch information
manucorporat committed Nov 6, 2020
1 parent 26485db commit ab6dff1
Show file tree
Hide file tree
Showing 20 changed files with 122 additions and 4 deletions.
2 changes: 2 additions & 0 deletions src/app-data/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,6 @@ export const BUILD: BuildConditionals = {
attachStyles: true,
};

export const Env = {};

export const NAMESPACE = /* default */ 'app' as string;
2 changes: 1 addition & 1 deletion src/client/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
5 changes: 5 additions & 0 deletions src/compiler/bundle/app-data-plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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`);
};
Expand Down
3 changes: 3 additions & 0 deletions src/compiler/config/validate-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/compiler/transformers/update-stencil-core-import.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ const KEEP_IMPORTS = new Set([
'setMode',
'getMode',
'Build',
'Env',
'Host',
'Fragment',
'getAssetPath',
Expand Down
2 changes: 2 additions & 0 deletions src/declarations/stencil-private.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2213,6 +2213,7 @@ export interface JestEnvironmentGlobal {
fullName: string;
testPath: string;
};
env: {[prop: string]: string};
screenshotDescriptions: Set<string>;
}

Expand All @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions src/declarations/stencil-public-compiler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions src/declarations/stencil-public-runtime.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/hydrate/platform/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions src/internal/stencil-core/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export {
forceUpdate,
h,
Host,
Env,
Listen,
Method,
Prop,
Expand Down
7 changes: 6 additions & 1 deletion src/runtime/test/globals.spec.tsx
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down Expand Up @@ -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 () => {
Expand Down
1 change: 1 addition & 0 deletions src/testing/jest/jest-runner.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 5 additions & 1 deletion src/testing/jest/jest-setup-test-framework.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
}
}
1 change: 1 addition & 0 deletions src/testing/platform/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export { Build } from './testing-build';
export { Env } from '@app-data';
export { consoleDevError, consoleDevInfo, consoleDevWarn, consoleError } from './testing-log';
export {
Context,
Expand Down
13 changes: 13 additions & 0 deletions test/end-to-end/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ export namespace Components {
}
interface ElementCmp {
}
interface EnvData {
}
interface EventCmp {
"methodThatFiresEventWithOptions": () => Promise<void>;
"methodThatFiresMyDocumentEvent": () => Promise<void>;
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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>;
Expand Down
19 changes: 19 additions & 0 deletions test/end-to-end/src/env-data/env-data.e2e.ts
Original file line number Diff line number Diff line change
@@ -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>
`);
});
});
20 changes: 20 additions & 0 deletions test/end-to-end/src/env-data/env-data.spec.ts
Original file line number Diff line number Diff line change
@@ -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>
`);
});

});
17 changes: 17 additions & 0 deletions test/end-to-end/src/env-data/env-data.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
}
10 changes: 10 additions & 0 deletions test/end-to-end/src/env-data/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# env-data



<!-- Auto Generated Below -->


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
4 changes: 4 additions & 0 deletions test/end-to-end/stencil.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@ export const config: Config = {
initialValue: '0',
hydratedValue: '1',
},
env: {
'foo': 'bar',
'HOST': 'example.com'
},
enableCache: false,
hashFileNames: false,
buildEs5: 'prod',
Expand Down

0 comments on commit ab6dff1

Please sign in to comment.