javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(vue): add custom elements bundle (#23458)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-06-17 14:10:50 -04:00
committed by GitHub
parent bccb8ad5fb
commit dc48a9f1a2
37 changed files with 468 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
core/package-lock.json generated
View File

@@ -9,7 +9,7 @@
"version": "5.7.0-dev.202106081605.0bc250e",
"license": "MIT",
"dependencies": {
"@stencil/core": "^2.4.0",
"@stencil/core": "^2.6.0",
"ionicons": "^5.5.1",
"tslib": "^2.1.0"
},
@@ -19,7 +19,7 @@
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "^0.4.2",
"@stencil/vue-output-target": "^0.5.0",
"@types/jest": "^26.0.20",
"@types/node": "^14.6.0",
"@types/puppeteer": "5.4.3",
@@ -1356,9 +1356,9 @@
}
},
"node_modules/@stencil/core": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.0.tgz",
"integrity": "sha512-gpoYJEYzu5LV2hr7uPZklug3zXhEbYGKyNodPfmOOYZtO9q42l7RQ3cAnC8MzEoF4jFrfemgtevGik8sqn9ClQ==",
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz",
"integrity": "sha512-QsxWayZyusnqSZrlCl81R71rA3KqFjVVQSH4E0rGN15F1GdQaFonKlHLyCOLKLig1zzC+DQkLLiUuocexuvdeQ==",
"bin": {
"stencil": "bin/stencil"
},
@@ -1374,12 +1374,12 @@
"dev": true
},
"node_modules/@stencil/vue-output-target": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.2.tgz",
"integrity": "sha512-C+HYpVXpYUpD0x8eFC0Ahe45D3ZOUpMAh/RDCXsgooi1auWTaOFvA7YkXHpc6suBkh44HnPhYEA1VIslpU4QEA==",
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.5.0.tgz",
"integrity": "sha512-OuVOnlG6FpX/N8xWxwqCjTtq5LBCgvNiWt3mNQHYxb8wSEXqX46eOoTqkKjKcbG3YF/8bNyOgDtIzTl9HZmPeQ==",
"dev": true,
"peerDependencies": {
"@stencil/core": ">=1.8.0"
"@stencil/core": ">=1.8.0 || ^2.0.0"
}
},
"node_modules/@stylelint/postcss-css-in-js": {
@@ -11978,11 +11978,6 @@
"safer-buffer": "^2.0.2",
"tweetnacl": "~0.14.0"
},
"bin": {
"sshpk-conv": "bin/sshpk-conv",
"sshpk-sign": "bin/sshpk-sign",
"sshpk-verify": "bin/sshpk-verify"
},
"engines": {
"node": ">=0.10.0"
}
@@ -15011,9 +15006,9 @@
}
},
"@stencil/core": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.0.tgz",
"integrity": "sha512-gpoYJEYzu5LV2hr7uPZklug3zXhEbYGKyNodPfmOOYZtO9q42l7RQ3cAnC8MzEoF4jFrfemgtevGik8sqn9ClQ=="
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz",
"integrity": "sha512-QsxWayZyusnqSZrlCl81R71rA3KqFjVVQSH4E0rGN15F1GdQaFonKlHLyCOLKLig1zzC+DQkLLiUuocexuvdeQ=="
},
"@stencil/sass": {
"version": "1.3.2",
@@ -15022,11 +15017,10 @@
"dev": true
},
"@stencil/vue-output-target": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.2.tgz",
"integrity": "sha512-C+HYpVXpYUpD0x8eFC0Ahe45D3ZOUpMAh/RDCXsgooi1auWTaOFvA7YkXHpc6suBkh44HnPhYEA1VIslpU4QEA==",
"dev": true,
"requires": {}
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.5.0.tgz",
"integrity": "sha512-OuVOnlG6FpX/N8xWxwqCjTtq5LBCgvNiWt3mNQHYxb8wSEXqX46eOoTqkKjKcbG3YF/8bNyOgDtIzTl9HZmPeQ==",
"dev": true
},
"@stylelint/postcss-css-in-js": {
"version": "0.37.2",

4
core/package.json
View File

@@ -31,7 +31,7 @@
"loader/"
],
"dependencies": {
"@stencil/core": "^2.4.0",
"@stencil/core": "^2.6.0",
"ionicons": "^5.5.1",
"tslib": "^2.1.0"
},
@@ -41,7 +41,7 @@
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/sass": "1.3.2",
"@stencil/vue-output-target": "^0.4.2",
"@stencil/vue-output-target": "^0.5.0",
"@types/jest": "^26.0.20",
"@types/node": "^14.6.0",
"@types/puppeteer": "5.4.3",

4
core/src/css/structure.scss
View File

@@ -26,6 +26,10 @@ html:not(.hydrated) body {
display: none;
}
html.ion-ce body {
display: block;
}
html.plt-pwa {
height: 100vh;
}

14
core/src/global/ionic-global.ts
View File

@@ -1,4 +1,4 @@
import { getMode, setMode } from '@stencil/core';
import { getMode, setMode, setPlatformHelpers } from '@stencil/core';
import { IonicConfig, Mode } from '../interface';
import { isPlatform, setupPlatforms } from '../utils/platform';
@@ -24,6 +24,18 @@ export const initialize = (userConfig: IonicConfig = {}) => {
// Setup platforms
setupPlatforms(win);
const platformHelpers: any = {};
if (userConfig._ael) {
platformHelpers.ael = userConfig._ael;
}
if (userConfig._rel) {
platformHelpers.rel = userConfig._rel;
}
if (userConfig._ce) {
platformHelpers.ce = userConfig._ce;
}
setPlatformHelpers(platformHelpers);
// create the Ionic.config from raw config object (if it exists)
// and convert Ionic.config into a ConfigApi that has a get() fn
const configObj = {

1
core/src/utils/config.ts
View File

@@ -190,6 +190,7 @@ export interface IonicConfig {
_zoneGate?: (h: () => any) => any;
_ael?: (el: any, name: string, cb: any, opts: any) => any;
_rel?: (el: any, name: string, cb: any, opts: any) => any;
_ce?: (eventName: string, opts: any) => any;
}
export const setupConfig = (config: IonicConfig) => {

4
core/src/utils/platform.ts
View File

@@ -109,13 +109,13 @@ const isElectron = (win: Window): boolean =>
testUserAgent(win, /electron/i);
const isPWA = (win: Window): boolean =>
!!(win.matchMedia('(display-mode: standalone)').matches || (win.navigator as any).standalone);
!!((win.matchMedia && win.matchMedia('(display-mode: standalone)').matches) || (win.navigator as any).standalone);
export const testUserAgent = (win: Window, expr: RegExp) =>
expr.test(win.navigator.userAgent);
const matchMedia = (win: Window, query: string): boolean =>
win.matchMedia(query).matches;
win.matchMedia && win.matchMedia(query).matches;
const PLATFORMS_MAP = {
'ipad': isIpad,

9
core/stencil.config.ts
View File

@@ -62,6 +62,9 @@ export const config: Config = {
outputTargets: [
vueOutputTarget({
componentCorePackage: '@ionic/core',
includeImportCustomElements: true,
includePolyfills: false,
includeDefineCustomElements: false,
proxiesFile: '../packages/vue/src/proxies.ts',
excludeComponents: [
// Routing
@@ -92,15 +95,13 @@ export const config: Config = {
{
elements: ['ion-checkbox', 'ion-toggle'],
targetAttr: 'checked',
// TODO Ionic v6 remove in favor of v-ion-change
event: ['v-ionChange', 'v-ion-change'],
event: 'v-ion-change',
externalEvent: 'ionChange'
},
{
elements: ['ion-datetime', 'ion-input', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-textarea'],
targetAttr: 'value',
// TODO Ionic v6 remove in favor of v-ion-change
event: ['v-ionChange', 'v-ion-change'],
event: 'v-ion-change',
externalEvent: 'ionChange'
}
],