diff --git a/demo/package-lock.json b/demo/package-lock.json index 2d64738..dc2f6bd 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -803,20 +803,18 @@ } }, "@babel/runtime": { - "version": "7.6.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.0.tgz", - "integrity": "sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==", + "version": "7.10.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz", + "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==", "requires": { - "regenerator-runtime": "^0.13.2" - } - }, - "@babel/runtime-corejs2": { - "version": "7.6.0", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.6.0.tgz", - "integrity": "sha512-zbPQzlbyJab2xCYb6VaESn8Tk/XiVpQJU7WvIKiQCwlFyc2NSCzKjqtBXCvpZBbiTOHCx10s2656REVnySwb+A==", - "requires": { - "core-js": "^2.6.5", - "regenerator-runtime": "^0.13.2" + "regenerator-runtime": "^0.13.4" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } } }, "@babel/template": { @@ -1318,6 +1316,25 @@ "resolved": "https://artifactory.labkey.com/artifactory/api/npm/libs-client/@labkey/api/-/@labkey/api-0.0.45.tgz", "integrity": "sha1-F1ertkYwErJ3J4Q9aEam//2UtTQ=" }, + "@popperjs/core": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz", + "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==" + }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz", + "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==", + "requires": { + "lodash": "^4.17.15", + "lodash-es": "^4.17.15" + } + }, "@types/babel__core": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.3.tgz", @@ -1493,6 +1510,11 @@ "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==", "dev": true }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" + }, "@types/yargs": { "version": "13.0.2", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.2.tgz", @@ -2468,6 +2490,12 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "bootstrap-scss": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/bootstrap-scss/-/bootstrap-scss-4.5.0.tgz", + "integrity": "sha512-6vCW3JBfOW7v9EQwyV0kWdEyvk2hf7U8TIojRgz19/nJoJGe8BQa1L/Tk7B0wmKEqHR/lA93Lhp+dLRphZt3vg==", + "dev": true + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -3274,7 +3302,8 @@ "core-js": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz", - "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==" + "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==", + "dev": true }, "core-js-compat": { "version": "3.2.1", @@ -3787,11 +3816,19 @@ } }, "dom-helpers": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", - "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz", + "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==", "requires": { - "@babel/runtime": "^7.1.2" + "@babel/runtime": "^7.8.7", + "csstype": "^2.6.7" + }, + "dependencies": { + "csstype": { + "version": "2.6.10", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", + "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==" + } } }, "dom-serializer": { @@ -7914,11 +7951,6 @@ "verror": "1.10.0" } }, - "keycode": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", - "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" - }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -8030,8 +8062,12 @@ "lodash": { "version": "4.17.15", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", - "dev": true + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + }, + "lodash-es": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", + "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" }, "lodash.escape": { "version": "4.0.1", @@ -9647,12 +9683,12 @@ } }, "prop-types-extra": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", - "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", "requires": { "react-is": "^16.3.2", - "warning": "^3.0.0" + "warning": "^4.0.0" } }, "proxy-addr": { @@ -9852,22 +9888,34 @@ } }, "react-bootstrap": { - "version": "0.32.4", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.32.4.tgz", - "integrity": "sha512-xj+JfaPOvnvr3ow0aHC7Y3HaBKZNR1mm361hVxVzVX3fcdJNIrfiodbQ0m9nLBpNxiKG6FTU2lq/SbTDYT2vew==", - "requires": { - "@babel/runtime-corejs2": "^7.0.0", - "classnames": "^2.2.5", - "dom-helpers": "^3.2.0", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.1.tgz", + "integrity": "sha512-xMHwsvDN7sIv26P9wWiosWjITZije2dRCjEJHVfV2KFoSJY+8uv2zttEw0XMB7xviQcW3zuIGLJXuj8vf6lYEg==", + "requires": { + "@babel/runtime": "^7.4.2", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.21", + "@types/react": "^16.9.23", + "classnames": "^2.2.6", + "dom-helpers": "^5.1.2", "invariant": "^2.2.4", - "keycode": "^2.2.0", - "prop-types": "^15.6.1", - "prop-types-extra": "^1.0.1", - "react-overlays": "^0.8.0", - "react-prop-types": "^0.4.0", - "react-transition-group": "^2.0.0", - "uncontrollable": "^5.0.0", - "warning": "^3.0.0" + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^3.1.2", + "react-transition-group": "^4.0.0", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + }, + "dependencies": { + "@types/react": { + "version": "16.9.35", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.35.tgz", + "integrity": "sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + } } }, "react-dom": { @@ -9917,24 +9965,18 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, "react-overlays": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz", - "integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==", - "requires": { - "classnames": "^2.2.5", - "dom-helpers": "^3.2.1", - "prop-types": "^15.5.10", - "prop-types-extra": "^1.0.1", - "react-transition-group": "^2.2.0", - "warning": "^3.0.0" - } - }, - "react-prop-types": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz", - "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=", - "requires": { - "warning": "^3.0.0" + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-3.2.0.tgz", + "integrity": "sha512-YTgCmw6l4uBOYylSnc3V8WLX+A0EoGnzDrqkYz0K7MUKbMBZFpaxLXH4EF9eZbspd+syZHQ5XAABI7n/zak1EA==", + "requires": { + "@babel/runtime": "^7.4.5", + "@popperjs/core": "^2.0.0", + "@restart/hooks": "^0.3.12", + "@types/warning": "^3.0.0", + "dom-helpers": "^5.1.0", + "prop-types": "^15.7.2", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" } }, "react-test-renderer": { @@ -9962,14 +10004,14 @@ } }, "react-transition-group": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", - "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", "requires": { - "dom-helpers": "^3.4.0", + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", - "prop-types": "^15.6.2", - "react-lifecycles-compat": "^3.0.4" + "prop-types": "^15.6.2" } }, "read-pkg": { @@ -10208,7 +10250,8 @@ "regenerator-runtime": { "version": "0.13.3", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", - "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==", + "dev": true }, "regenerator-transform": { "version": "0.14.1", @@ -12168,11 +12211,25 @@ } }, "uncontrollable": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-5.1.0.tgz", - "integrity": "sha512-5FXYaFANKaafg4IVZXUNtGyzsnYEvqlr9wQ3WpZxFpEUxl29A3H6Q4G1Dnnorvq9TGOGATBApWR4YpLAh+F5hw==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz", + "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==", "requires": { - "invariant": "^2.2.4" + "@babel/runtime": "^7.6.3", + "@types/react": "^16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "dependencies": { + "@types/react": { + "version": "16.9.35", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.35.tgz", + "integrity": "sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + } } }, "unicode-canonical-property-names-ecmascript": { @@ -12466,9 +12523,9 @@ } }, "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", "requires": { "loose-envify": "^1.0.0" } diff --git a/demo/package.json b/demo/package.json index 4a6228d..dcbae5e 100644 --- a/demo/package.json +++ b/demo/package.json @@ -34,7 +34,7 @@ "@types/react-dom": "16.8.4", "immutable": "3.8.2", "react": "16.8.6", - "react-bootstrap": "0.32.4", + "react-bootstrap": "1.0.1", "react-dom": "16.8.6" }, "devDependencies": { @@ -48,6 +48,7 @@ "@types/react-hot-loader": "4.1.0", "babel-loader": "8.0.6", "better-npm-run": "0.1.1", + "bootstrap-scss": "4.5.0", "cross-env": "5.2.1", "css-loader": "2.1.1", "enzyme": "3.10.0", diff --git a/demo/src/client/HelloWorldPage/HelloWorld.tsx b/demo/src/client/HelloWorldPage/HelloWorld.tsx index 97194b5..e50ff00 100644 --- a/demo/src/client/HelloWorldPage/HelloWorld.tsx +++ b/demo/src/client/HelloWorldPage/HelloWorld.tsx @@ -1,13 +1,37 @@ import React from 'react' import "./helloWorld.scss"; +import {Button, Form} from "react-bootstrap"; export class App extends React.PureComponent { render() { return ( -

+ // TODO: Adding a top level class will allow you to scope your bootstrap 4 css just to your application +

Hello World! This is a simple test page to show a LabKey HTML view built with React. -

+ + {/*// TODO: Example copied from bootstrap 4 examples*/} +
+ + Email address + + + We'll never share your email with anyone else. + + + + + Password + + + + + + +
+
) } } diff --git a/demo/src/client/HelloWorldPage/app.tsx b/demo/src/client/HelloWorldPage/app.tsx index de67ed7..c355c98 100644 --- a/demo/src/client/HelloWorldPage/app.tsx +++ b/demo/src/client/HelloWorldPage/app.tsx @@ -5,5 +5,11 @@ import {App} from './HelloWorld' // Need to wait for container element to be available in labkey wrapper before render window.addEventListener('DOMContentLoaded', (event) => { - ReactDOM.render(, document.getElementById('app')); + ReactDOM.render(, + // TODO: Use this when not using shadow root + document.getElementById('app') + + // TODO: Use this when using shadow root + // window['shadowRoot'].getElementById('app') + ); }); diff --git a/demo/src/client/HelloWorldPage/dev.tsx b/demo/src/client/HelloWorldPage/dev.tsx index 3b8e92e..6ac447a 100644 --- a/demo/src/client/HelloWorldPage/dev.tsx +++ b/demo/src/client/HelloWorldPage/dev.tsx @@ -10,7 +10,12 @@ const render = () => { , + + // TODO: Use this when not using shadow root document.getElementById('app') + + // TODO: Use this when using shadow root + // window['shadowRoot'].getElementById('app') ) }; diff --git a/demo/src/client/HelloWorldPage/helloWorld.scss b/demo/src/client/HelloWorldPage/helloWorld.scss index 02a1a20..7d8b360 100644 --- a/demo/src/client/HelloWorldPage/helloWorld.scss +++ b/demo/src/client/HelloWorldPage/helloWorld.scss @@ -1,8 +1,34 @@ -.world-highlight { - color: deeppink; - text-shadow: 2px 2px black; - font-size: 18px; - font-weight: bold; - margin-right: 5px; + +/* TODO: Nesting your css styles, especially bootstrap 4 styles inside the main app class will scope those styles + to only your application. They will not affect the page header. Also because their specificity is greater than the + general bootstrap styles labkey provides, these rules will take priority in your app. */ +.hello-world-main { + + /* TODO: These imports are pulling files directly into your css from bootstrap-scss in node_modules. bootstrap-scss + was added in the package.json, it only contains the scss for bootstrap 4. ~bootstrap-scss is a short cut to the + node_modules directory, provided by the bootstrap-scss package. */ + /* TODO: Sass is discouraging the use of @import, instead recommending the use of @use which would require more selective + importing of styles from bootstrap-scss.*/ + @import "~bootstrap-scss/functions"; + @import "~bootstrap-scss/variables"; + @import "~bootstrap-scss/mixins"; + @import "~bootstrap-scss/forms"; + @import "~bootstrap-scss/dropdown"; + + /* TODO: In conjunction with importing ~bootstrap-scss or in place of it you can provide specific style updates. LabKey + has additional styles that might need to be overridden if you don't want them applied to your components. Those scss + files can be found here, https://github.com/LabKey/platform/tree/develop/core/resources/styles/scss/lib/bootstrap*/ + .form-control { + font-size: 1em; + } + + .world-highlight { + color: deeppink; + text-shadow: 2px 2px black; + font-size: 18px; + font-weight: bold; + margin-right: 5px; + } + } \ No newline at end of file diff --git a/demo/src/client/ToDoListPage/ToDoListPage.tsx b/demo/src/client/ToDoListPage/ToDoListPage.tsx index 49d3201..bac32fe 100644 --- a/demo/src/client/ToDoListPage/ToDoListPage.tsx +++ b/demo/src/client/ToDoListPage/ToDoListPage.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Panel, Button, Form, FormControl, Col, Row } from 'react-bootstrap' +import { Button, Form, FormControl, Col, Row } from 'react-bootstrap' import {List} from 'immutable' import { getServerContext } from "@labkey/api"; import "./todolist.scss"; @@ -68,29 +68,30 @@ export class App extends React.Component { renderItemEntryPanel() { return ( - - - Create New To-Do List Items - - -
- - - - - - - - - -
- - +
+ // + // + // Create New To-Do List Items + // + // + //
+ // + // + // + // + // + // + // + // + // + //
+ // + // ) } @@ -98,27 +99,28 @@ export class App extends React.Component { const { todoList } = this.state; return ( - - - To-Do List for {getServerContext().user.displayName} - - -

- Click on a To-Do list item to mark is as complete. -

-
    - {todoList.map((item, i) => { - const cls = item.isComplete ? ' todolist-complete-item' : 'todolist-incomplete-item'; - - return ( -
  • this.onItemClick(i)}> - {item.name}: {item.text} -
    • - ) - })} -
- - +
+ // + // + // To-Do List for {getServerContext().user.displayName} + // + // + //

+ // Click on a To-Do list item to mark is as complete. + //

+ //
    + // {todoList.map((item, i) => { + // const cls = item.isComplete ? ' todolist-complete-item' : 'todolist-incomplete-item'; + // + // return ( + //
  • this.onItemClick(i)}> + // {item.name}: {item.text} + //
    • + // ) + // })} + //
+ // + // ) } diff --git a/demo/webpack/app_shadow.template.html b/demo/webpack/app_shadow.template.html new file mode 100644 index 0000000..4b55d93 --- /dev/null +++ b/demo/webpack/app_shadow.template.html @@ -0,0 +1,21 @@ +
+ + + +<% if (htmlWebpackPlugin.options.mode === 'dev') { %> + +<% } %> \ No newline at end of file diff --git a/demo/webpack/prod.config.js b/demo/webpack/prod.config.js index f41a98a..2f1ca76 100644 --- a/demo/webpack/prod.config.js +++ b/demo/webpack/prod.config.js @@ -27,7 +27,12 @@ for (let i = 0; i < entryPoints.apps.length; i++) { new HtmlWebpackPlugin({ inject: false, filename: '../../../views/' + entryPoint.name + '.html', + + // TODO: Use this when not using shadow root template: 'webpack/app.template.html' + + // TODO: Use this for shadow root + // template: 'webpack/app_shadow.template.html' }), new HtmlWebpackPlugin({ inject: false, @@ -43,7 +48,12 @@ for (let i = 0; i < entryPoints.apps.length; i++) { mode: 'dev', name: entryPoint.name, filename: '../../../views/' + entryPoint.name + 'Dev.html', + + // TODO: Use this when not using shadow root template: 'webpack/app.template.html' + + // TODO: Use this for shadow root + // template: 'webpack/app_shadow.template.html' }) ]); }