CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dcloudio--uni-mp-toutiao

This package is the uni-app Toutiao (ByteDance) mini-program support module that enables developers to compile and deploy uni-app applications to the Toutiao mini-program platform.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

parsing-utilities.mddocs/

Parsing Utilities

Main package exports for parsing and managing page and component options with Toutiao-specific adaptations and lifecycle management.

Capabilities

Page Option Parsing

Parses page configuration options and applies Toutiao-specific adaptations and lifecycle management.

/**
 * Parse page options with Toutiao-specific adaptations
 * @param options - Raw page configuration options
 * @returns Parsed page options ready for Toutiao platform
 */
function parsePage(options: PageOptions): ParsedPageOptions;

interface PageOptions {
  data?: Record<string, any>;
  onLoad?: (options: Record<string, any>) => void;
  onShow?: () => void;
  onReady?: () => void;
  onHide?: () => void;
  onUnload?: () => void;
  onPullDownRefresh?: () => void;
  onReachBottom?: () => void;
  [key: string]: any;
}

interface ParsedPageOptions {
  data?: Record<string, any>;
  lifetimes: PageLifetimes;
  methods: Record<string, Function>;
  mocks: PageMocks;
  [key: string]: any;
}

interface PageLifetimes {
  onLoad?: (options: Record<string, any>) => void;
  onShow?: () => void;
  onReady?: () => void;
  onHide?: () => void;
  onUnload?: () => void;
  onPullDownRefresh?: () => void;
  onReachBottom?: () => void;
}

interface PageMocks {
  __route__: string;
  __webviewId__: number;
  __nodeId__: number;
  __nodeid__: number;
}

Usage Example:

import { parsePage } from "@dcloudio/uni-mp-toutiao";

const rawPageOptions = {
  data: {
    userInfo: null,
    loading: false
  },
  onLoad(query) {
    console.log('Page loaded:', query);
  },
  onShow() {
    console.log('Page shown');
  },
  customMethod() {
    console.log('Custom page method');
  }
};

const parsedOptions = parsePage(rawPageOptions);
// Returns parsed options with Toutiao-specific adaptations

Component Option Parsing

Parses component configuration options with enhanced lifecycle management and Toutiao-specific behavior handling.

/**
 * Parse component options with Toutiao-specific behavior adaptations
 * @param options - Raw component configuration options
 * @returns Parsed component options with platform adaptations
 */
function parseComponent(options: ComponentOptions): ParsedComponentOptions;

interface ComponentOptions {
  data?: Record<string, any>;
  props?: Record<string, PropDefinition>;
  attached?: () => void;
  ready?: () => void;
  detached?: () => void;
  relations?: Record<string, RelationDefinition>;
  methods?: Record<string, Function>;
  [key: string]: any;
}

interface ParsedComponentOptions {
  data?: Record<string, any>;
  properties: Record<string, PropDefinition>;
  lifetimes: ComponentLifetimes;
  methods: Record<string, Function>;
  relations: Record<string, RelationDefinition>;
  attached?: () => void;
  ready?: () => void;
  detached?: () => void;
  [key: string]: any;
}

interface ComponentLifetimes {
  attached?: () => void;
  ready?: () => void;
  detached?: () => void;
  moved?: () => void;
  error?: (error: Error) => void;
}

interface PropDefinition {
  type: any;
  value?: any;
  observer?: (newVal: any, oldVal: any, changedPath: string) => void;
}

interface RelationDefinition {
  type: 'parent' | 'child' | 'ancestor' | 'descendant';
  target: string;
  linked?: (target: any) => void;
  linkChanged?: (target: any) => void;
  unlinked?: (target: any) => void;
}

Usage Example:

import { parseComponent } from "@dcloudio/uni-mp-toutiao";

const rawComponentOptions = {
  data: {
    count: 0
  },
  props: {
    title: {
      type: String,
      value: 'Default Title'
    }
  },
  attached() {
    console.log('Component attached');
  },
  methods: {
    increment() {
      this.setData({ count: this.data.count + 1 });
    }
  },
  relations: {
    './parent-component': {
      type: 'parent',
      linked(target) {
        console.log('Linked to parent');
      }
    }
  }
};

const parsedOptions = parseComponent(rawComponentOptions);
// Returns parsed options with Toutiao-specific component behavior

Lifecycle Initialization

Initialize page and component lifecycle management systems with Toutiao platform adaptations.

/**
 * Initialize page lifecycle management system
 * Sets up page-specific lifecycle handling for Toutiao platform
 */
function initPageLifetimes(): void;

/**
 * Initialize component lifecycle management system
 * Sets up component-specific lifecycle handling with Toutiao adaptations
 */
function initComponentLifetimes(): void;

Usage Example:

import { initPageLifetimes, initComponentLifetimes } from "@dcloudio/uni-mp-toutiao";

// Initialize lifecycle systems (typically done automatically)
initPageLifetimes();
initComponentLifetimes();

Global Component Instance Registry

Global registry for tracking component instances, supporting relationship management and debugging.

/**
 * Global component instance registry
 * Tracks all component instances for relationship management
 */
interface GlobalInstances {
  [instanceId: string]: ComponentInstance;
}

interface ComponentInstance {
  /** Instance identifier */
  instanceId: string;
  /** Node identifier (0 for pages) */
  nodeId: number;
  /** Component data */
  data: Record<string, any>;
  /** Component properties */
  properties: Record<string, any>;
  /** Component methods */
  methods: Record<string, Function>;
  /** Parent instance reference */
  parent?: ComponentInstance;
  /** Child instances */
  children: ComponentInstance[];
  /** Update component data */
  setData: (data: Record<string, any>) => void;
  /** Trigger custom events */
  triggerEvent: (eventName: string, detail?: any) => void;
}

const instances: GlobalInstances;

Usage Example:

import { instances } from "@dcloudio/uni-mp-toutiao";

// Access all component instances
console.log('Total instances:', Object.keys(instances).length);

// Find pages (nodeId === 0)
const pages = Object.values(instances).filter(instance => instance.nodeId === 0);
console.log('Active pages:', pages.length);

// Access specific instance
const instance = instances['some-instance-id'];
if (instance) {
  console.log('Instance data:', instance.data);
}

Utility Functions

Instance Management

Helper functions for managing component instances and relationships.

/**
 * Check if an instance is a page
 * @param instance - Component instance to check
 * @returns True if instance is a page (nodeId === 0)
 */
function isPage(instance: ComponentInstance): boolean;

/**
 * Initialize component relationships
 * @param instance - Component instance
 * @param relations - Relation definitions
 */
function initRelation(instance: ComponentInstance, relations: Record<string, RelationDefinition>): void;

/**
 * Handle component linking with virtualHost support
 * @param instance - Component instance
 * @param target - Target component to link
 * @param relation - Relation definition
 */
function handleLink(instance: ComponentInstance, target: ComponentInstance, relation: RelationDefinition): void;

Platform-Specific Adaptations

Toutiao Lifecycle Fixes

The parsing utilities include special handling for Toutiao platform quirks:

  • Attached Order Fix: Handles attachment order issues in Toutiao base library 2.0+
  • Event Timing: Special handling for late event reception after ready lifecycle
  • Virtual Host Support: Alternative component linking for virtualHost components
  • Inject/Provide Delay: Workaround for delayed inject/provide initialization

Mock Property Injection

Pages automatically receive mock properties for compatibility:

  • __route__: Current page route path
  • __webviewId__: Webview identifier for the page
  • __nodeId__: Node identifier (always 0 for pages)
  • __nodeid__: Alternative node identifier format

Instance Tracking

All components are automatically registered in the global instances registry with:

  • Unique instance identifiers
  • Parent-child relationship tracking
  • Data and property access
  • Method binding and event handling

Install with Tessl CLI

npx tessl i tessl/npm-dcloudio--uni-mp-toutiao

docs

api-integration.md

build-system.md

index.md

parsing-utilities.md

platform-services.md

runtime.md

tile.json