javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: working with builder xml require vs dynamic import wip

Browse Source
This commit is contained in:
Nathan Walker
2025-07-22 14:37:11 -07:00
parent b4579d1d2f
commit 0ba0ab0d59
23 changed files with 141 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/ui/builder/binding-builder.d.ts vendored
View File

@@ -1,16 +0,0 @@
//@private
export module bindingConstants {
export const sourceProperty: string;
export const targetProperty: string;
export const expression: string;
export const twoWay: string;
export const source: string;
export const bindingValueKey: string;
export const parentValueKey: string;
export const parentsValueKey: string;
export const newPropertyValueKey: string;
}
export function getBindingOptions(name: string, value: string): any;
export const parentsRegex: RegExp;

20
packages/core/ui/builder/component-builder/index.ts
View File

@@ -72,7 +72,7 @@ const createComponentInstance = profile('createComponentInstance', (elementName:
// console.log('CUSTOM namespace:', namespace)
resolvedModuleName = resolveModuleName(namespace, '');
}
instanceModule = global.loadModule(resolvedModuleName, true);
instanceModule = global.loadModule(resolvedModuleName);
} else {
// load module from @nativescript/core/ui or mapped paths
// resolvedModuleName =
@@ -84,7 +84,7 @@ const createComponentInstance = profile('createComponentInstance', (elementName:
// .join('-')
// .toLowerCase();
instanceModule = global.loadModule(CORE_UI_BARREL, false);
instanceModule = global.loadModule(CORE_UI_BARREL);
// don't register core modules for HMR self-accept
// instanceModule = global.loadModule(resolvedModuleName, false);
}
@@ -107,7 +107,7 @@ const getComponentModuleExports = profile('getComponentModuleExports', (instance
if (codeFileAttribute) {
const resolvedCodeFileModule = resolveModuleName(sanitizeModuleName(codeFileAttribute), '');
if (resolvedCodeFileModule) {
moduleExports = global.loadModule(resolvedCodeFileModule, true);
moduleExports = global.loadModule(resolvedCodeFileModule);
(<any>instance).exports = moduleExports;
} else {
throw new Error(`Code file with path "${codeFileAttribute}" cannot be found! Looking for webpack module with name "${resolvedCodeFileModule}"`);
@@ -155,6 +155,10 @@ const applyComponentAttributes = profile('applyComponentAttributes', (instance:
}
}
console.log('applyComponentAttributes called for attr:', attr, 'with value:', attrValue);
if (attr === 'navigatingTo') {
console.log('@@@ navigatingTo moduleExports:', moduleExports);
}
if (attr.indexOf('.') !== -1) {
let subObj = instance;
const properties = attr.split('.');
@@ -185,6 +189,9 @@ export function getComponentModule(elementName: string, namespace: string, attri
const { instance, instanceModule } = createComponentInstance(elementName, namespace, null);
moduleExports = getComponentModuleExports(instance, <any>moduleExports, attributes);
console.log('getComponentModule called for element:', elementName, 'with namespace:', namespace, 'and attributes:', attributes);
console.log('moduleExports ---');
console.log(moduleExports);
if (isRootComponent) {
applyComponentCss(instance, moduleNamePath, attributes);
}
@@ -202,6 +209,7 @@ export function getComponentModule(elementName: string, namespace: string, attri
export function setPropertyValue(instance: View, instanceModule: Object, exports: Object, propertyName: string, propertyValue: any) {
// Note: instanceModule can be null if we are loading custom component with no code-behind.
if (isBinding(propertyValue) && instance.bind) {
console.log('1 setPropertyValue, Binding detected for property:', propertyName, 'with value:', propertyValue);
const bindOptions = getBindingOptions(propertyName, getBindingExpressionFromAttribute(propertyValue));
instance.bind(
{
@@ -213,6 +221,8 @@ export function setPropertyValue(instance: View, instanceModule: Object, exports
bindOptions[bindingConstants.source],
);
} else if (isEventOrGesture(propertyName, instance)) {
console.log('2 setPropertyValue, Binding detected for property:', propertyName, 'with value:', propertyValue);
console.log('setPropertyValue, exports:', exports);
// Get the event handler from page module exports.
const handler = exports && exports[propertyValue];
@@ -221,8 +231,10 @@ export function setPropertyValue(instance: View, instanceModule: Object, exports
instance.on(propertyName, handler);
}
} else if (isKnownFunction(propertyName, instance) && exports && typeof exports[propertyValue] === 'function') {
console.log('3 setPropertyValue, Binding detected for property:', propertyName, 'with value:', propertyValue);
instance[propertyName] = exports[propertyValue];
} else {
console.log('4 setPropertyValue, Binding detected for property:', propertyName, 'with value:', propertyValue);
instance[propertyName] = propertyValue;
}
}
@@ -233,11 +245,11 @@ function getBindingExpressionFromAttribute(value: string): string {
function isBinding(value: any): boolean {
let isBinding;
if (typeof value === 'string') {
const str = value.trim();
isBinding = str.indexOf('{{') === 0 && str.lastIndexOf('}}') === str.length - 2;
}
console.log('isBinding called with value:', value, ' isBinding:', isBinding);
return isBinding;
}

73
packages/core/ui/builder/index.d.ts vendored
View File

@@ -1,73 +0,0 @@
import { View, Template, KeyedTemplate } from '../core/view';
import { Page } from '../page';
import { NavigationEntry } from '../frame';
export interface LoadOptions {
path: string;
name: string;
attributes?: any;
exports?: any;
page?: Page;
}
/**
* @deprecated Use Builder.createViewFromEntry() instead.
*/
export function createViewFromEntry(entry: NavigationEntry): View;
/**
* @deprecated Use Builder.parse() instead.
*/
export function parse(value: string | Template, exports?: any): View;
/**
* @deprecated Use Builder.parseMultipleTemplates() instead.
*/
export function parseMultipleTemplates(value: string, exports?: any): Array<KeyedTemplate>;
/**
* @deprecated Use Builder.load() instead.
*/
export function load(fileName: string, exports?: any): View;
/**
* @deprecated Use Builder.load() instead.
*/
export function load(options: LoadOptions): View;
export class Builder {
/**
* UI plugin developers can add to these to define their own custom types if needed
*/
static knownTemplates: Set<string>;
static knownMultiTemplates: Set<string>;
static knownCollections: Set<string>;
/**
* Creates view from navigation entry
* @param entry NavigationEntry
*/
static createViewFromEntry(entry: NavigationEntry): View;
static parse(value: string | Template, exports?: any): View;
/**
* Creates an array of KeyedTemplates from string
* @param value The xml of the template to be parsed
* @param exports Current context of the template
*/
static parseMultipleTemplates(value: string, exports?: any): Array<KeyedTemplate>;
/**
* Loads component from module with context
* @param moduleName the module name
* @param exports the context of the component to be loaded
*/
static load(moduleName: string, exports?: any): View;
/**
* Loads component from options
* @param options Load options
*/
static load(options: LoadOptions): View;
}

50
packages/core/ui/builder/index.ts
View File

@@ -52,11 +52,17 @@ export interface LoadOptions {
}
export class Builder {
// ui plugin developers can add to these to define their own custom types if needed
/**
* UI plugin developers can add to these to define their own custom types if needed
*/
static knownTemplates: Set<string> = new Set(['itemTemplate']);
static knownMultiTemplates: Set<string> = new Set(['itemTemplates']);
static knownCollections: Set<string> = new Set(['items', 'spans', 'actionItems']);
/**
* Creates view from navigation entry
* @param entry NavigationEntry
*/
static createViewFromEntry(entry: ViewEntry): View {
if (entry.create) {
const view = entry.create();
@@ -68,8 +74,8 @@ export class Builder {
} else if (entry.moduleName) {
const moduleName = sanitizeModuleName(entry.moduleName);
const resolvedCodeModuleName = resolveModuleName(moduleName, ''); //`${moduleName}.xml`;
const moduleExports = resolvedCodeModuleName ? global.loadModule(resolvedCodeModuleName, true) : null;
const moduleExports = resolvedCodeModuleName ? global.loadModule(resolvedCodeModuleName) : null;
console.log('Resolved code module name:', resolvedCodeModuleName, ' exports:', moduleExports);
if (moduleExports && moduleExports.createPage) {
// Exports has a createPage() method
const view = moduleExports.createPage();
@@ -86,7 +92,7 @@ export class Builder {
componentView = componentModule && componentModule.component;
} else {
const resolvedXmlModuleName = resolveModuleName(moduleName, 'xml');
const componentModule = resolvedXmlModuleName ? global.loadModule(resolvedXmlModuleName, true) : null;
const componentModule = resolvedXmlModuleName ? global.loadModule(resolvedXmlModuleName) : null;
if (componentModule?.default) {
componentView = new componentModule.default();
} else {
@@ -111,9 +117,13 @@ export class Builder {
}
}
/**
* Loads component from module with context
* @param moduleName the module name
* @param exports the context of the component to be loaded
*/
static load(pathOrOptions: string | LoadOptions, context?: any): View {
let componentModule: ComponentModule;
if (typeof pathOrOptions === 'string') {
const moduleName = sanitizeModuleName(pathOrOptions);
componentModule = loadInternal(moduleName, context);
@@ -124,6 +134,11 @@ export class Builder {
return componentModule && componentModule.component;
}
/**
* Creates an array of KeyedTemplates from string
* @param value The xml of the template to be parsed
* @param exports Current context of the template
*/
static parseMultipleTemplates(value: string, context: any): Array<KeyedTemplate> {
const dummyComponent = `<ListView><ListView.itemTemplates>${value}</ListView.itemTemplates></ListView>`;
@@ -131,24 +146,36 @@ export class Builder {
}
}
/**
* @deprecated Use Builder.parse() instead.
*/
export function parse(value: string | Template, context?: any): View {
console.log('parse() is deprecated. Use Builder.parse() instead.');
return Builder.parse(value, context);
}
/**
* @deprecated Use Builder.parseMultipleTemplates() instead.
*/
export function parseMultipleTemplates(value: string, context: any): Array<KeyedTemplate> {
console.log('parseMultipleTemplates() is deprecated. Use Builder.parseMultipleTemplates() instead.');
return Builder.parseMultipleTemplates(value, context);
}
export function load(pathOrOptions: string | LoadOptions, context?: any): View {
/**
* @deprecated Use Builder.load() instead.
*/
export async function load(pathOrOptions: string | LoadOptions, context?: any): Promise<View> {
console.log('load() is deprecated. Use Builder.load() instead.');
return Builder.load(pathOrOptions, context);
return await Builder.load(pathOrOptions, context);
}
/**
* @deprecated Use Builder.createViewFromEntry() instead.
*/
export function createViewFromEntry(entry: ViewEntry): View {
console.log('createViewFromEntry() is deprecated. Use Builder.createViewFromEntry() instead.');
@@ -157,11 +184,11 @@ export function createViewFromEntry(entry: ViewEntry): View {
function loadInternal(moduleName: string, moduleExports: any): ComponentModule {
let componentModule: ComponentModule;
console.log('loadInternal called for moduleName:', moduleName, 'with moduleExports:', moduleExports);
const resolvedXmlModule = resolveModuleName(moduleName, 'xml');
if (resolvedXmlModule) {
const text = global.loadModule(resolvedXmlModule, true);
const text = global.loadModule(resolvedXmlModule);
componentModule = parseInternal(text, moduleExports, resolvedXmlModule, moduleName);
}
@@ -202,7 +229,7 @@ export function loadCustomComponent(componentNamespace: string, componentName?:
let subExports = context;
if (resolvedCodeModuleName) {
// Component has registered code module.
subExports = global.loadModule(resolvedCodeModuleName, true);
subExports = global.loadModule(resolvedCodeModuleName);
}
// Pass the parent page down the chain in case of custom components nested on many levels. Use the context for piggybacking.
@@ -258,6 +285,7 @@ export function getExports(instance: ViewBase): any {
}
function parseInternal(value: string, context: any, xmlModule?: string, moduleName?: string): ComponentModule {
console.log('parseInternal called with value:', value, 'context:', context, 'xmlModule:', xmlModule, 'moduleName:', moduleName);
if (__UI_USE_XML_PARSER__) {
let start: xml2ui.XmlStringParser;
let ui: xml2ui.ComponentParser;
@@ -483,7 +511,6 @@ export namespace xml2ui {
constructor(parent: XmlStateConsumer, templateProperty: TemplateProperty, setTemplateProperty = true) {
this.parent = parent;
this._context = templateProperty.context;
this._recordedXmlStream = new Array<xml.ParserEvent>();
this._templateProperty = templateProperty;
@@ -641,6 +668,7 @@ export namespace xml2ui {
@profile
private buildComponent(args: xml.ParserEvent): ComponentModule {
console.log('ComponentParser.buildComponent called for element:', args.elementName, 'with namespace:', args.namespace, 'and attributes:', args.attributes, 'context:', this.context);
if (args.prefix && args.namespace) {
// Custom components
return loadCustomComponent(args.namespace, args.elementName, args.attributes, this.context, this.currentRootView, !this.currentRootView, this.moduleName);

1
packages/core/ui/frame/frame-common.ts
View File

@@ -226,6 +226,7 @@ export class FrameBase extends CustomLayoutView {
}
public navigate(param: any) {
console.log('framebase navigate() called with:', param);
if (Trace.isEnabled()) {
Trace.write(`NAVIGATE`, Trace.categories.Navigation);
}

13
packages/core/ui/index.ts
View File

@@ -23,11 +23,18 @@ export { unsetValue } from './core/properties/property-shared';
export { addWeakEventListener, removeWeakEventListener } from './core/weak-event-listener';
export { DatePicker } from './date-picker';
import { installPolyfills } from '../globals';
// import { installPolyfills } from '../globals';
// No need to export dialogs, they are already export exported globally
import * as uiDialogs from '../ui/dialogs';
global.registerModule('ui-dialogs', () => uiDialogs);
installPolyfills('ui-dialogs', ['alert', 'confirm', 'prompt', 'login', 'action']);
global.alert = uiDialogs.alert;
// @ts-ignore
global.confirm = uiDialogs.confirm;
// @ts-ignore
global.prompt = uiDialogs.prompt;
global.login = uiDialogs.login;
global.action = uiDialogs.action;
// global.registerModule('ui-dialogs', () => uiDialogs);
// installPolyfills('ui-dialogs', ['alert', 'confirm', 'prompt', 'login', 'action']);
export { DialogStrings, action, alert, confirm, login, prompt, getCurrentPage, Dialogs, inputType, capitalizationType } from './dialogs';
export type { DialogOptions, CancelableOptions, AlertOptions, PromptResult, PromptOptions, ActionOptions, ConfirmOptions, LoginResult, LoginOptions } from './dialogs';

1
packages/core/ui/page/page-common.ts
View File

@@ -135,6 +135,7 @@ export class PageBase extends ContentView {
@profile
public onNavigatedTo(isBackNavigation: boolean): void {
console.log('onNavigatedTo called with isBackNavigation:', isBackNavigation);
this.notify(this.createNavigatedData(PageBase.navigatedToEvent, isBackNavigation));
if (this.accessibilityAnnouncePageEnabled) {