Vue.js Integration

/**
 * Transforms JSX for uni-app H5 platform with optimizations
 * @returns Babel plugin configuration for JSX transformation
 */
function transformUniH5Jsx(): any;

import { transformUniH5Jsx } from "@dcloudio/uni-cli-shared";

// Babel configuration for H5 JSX processing
const babelConfig = {
  plugins: [
    transformUniH5Jsx(),
    // Other plugins...
  ]
};

// JSX code that gets transformed
const ComponentExample = () => (
  <view class="container">
    <text>Hello uni-app H5</text>
  </view>
);

/**
 * Checks if a URL is external (absolute URL or protocol-relative)
 * @param url - URL string to check
 * @returns True if URL is external, false if relative/local
 */
function isExternalUrl(url: string): boolean;

import { isExternalUrl } from "@dcloudio/uni-cli-shared";

// Check various URL types
console.log(isExternalUrl('https://example.com/image.png')); // true
console.log(isExternalUrl('http://cdn.example.com/script.js')); // true
console.log(isExternalUrl('//cdn.example.com/style.css')); // true
console.log(isExternalUrl('/static/images/logo.png')); // false
console.log(isExternalUrl('./assets/icon.svg')); // false
console.log(isExternalUrl('data:image/png;base64,iVBOR...')); // true

// Use in template processing
function processTemplateAssets(templateAst: any) {
  templateAst.forEach((node: any) => {
    if (node.type === 'element' && node.tag === 'img') {
      const srcAttr = node.attrs.find((attr: any) => attr.name === 'src');
      if (srcAttr && !isExternalUrl(srcAttr.value)) {
        // Process local image - add to build assets
        processLocalAsset(srcAttr.value);
      }
    }
  });
}

/**
 * Configuration for Vue lifecycle hook stripping in SSR context
 */
const stripOptions: SSRStripOptions;

interface SSRStripOptions {
  /** File patterns to include in stripping process */
  include: string[];
  /** Vue lifecycle functions to strip during SSR compilation */
  functions: string[];
}

import { stripOptions } from "@dcloudio/uni-cli-shared";

// Use in SSR build configuration
const ssrBuildConfig = {
  rollupOptions: {
    plugins: [
      vueSSRStripPlugin({
        include: stripOptions.include,
        functions: stripOptions.functions
      })
    ]
  }
};

// Vue lifecycle hooks that get stripped in SSR:
// - beforeMount
// - mounted
// - beforeUnmount  
// - unmounted
// - onMounted
// - onBeforeMount
// - onBeforeUnmount
// - onUnmounted
// And other client-only lifecycle hooks

// Template transformation utilities (from ./transforms)
// Complete API available through main export

// Vue-specific utilities (from ./utils)  
// Complete API available through main export

// Vue SFC parsing utilities (from ./parse)
// Complete API available through main export

import { 
  transformUniH5Jsx, 
  isExternalUrl, 
  stripOptions 
} from "@dcloudio/uni-cli-shared";

// Vite configuration for H5 platform
export default {
  plugins: [
    vue(),
    {
      name: 'uni-h5-jsx',
      config() {
        return {
          esbuild: {
            jsx: 'automatic',
            jsxImportSource: 'vue'
          }
        };
      }
    }
  ],
  build: {
    rollupOptions: {
      plugins: [
        babel({
          plugins: [transformUniH5Jsx()]
        })
      ]
    }
  }
};

import { isExternalUrl } from "@dcloudio/uni-cli-shared";

function processVueTemplate(template: string, baseUrl: string) {
  const urlPattern = /(src|href|url)\s*=\s*["']([^"']+)["']/g;
  
  return template.replace(urlPattern, (match, attr, url) => {
    if (isExternalUrl(url)) {
      // Keep external URLs as-is
      return match;
    } else {
      // Transform local URLs for build process
      const transformedUrl = transformLocalAsset(url, baseUrl);
      return `${attr}="${transformedUrl}"`;
    }
  });
}

import { stripOptions } from "@dcloudio/uni-cli-shared";

// SSR-specific build setup
const ssrConfig = {
  ssr: {
    format: 'cjs',
    target: 'node'
  },
  build: {
    ssr: true,
    rollupOptions: {
      plugins: [
        {
          name: 'strip-client-code',
          transform(code: string, id: string) {
            // Use stripOptions to remove client-only code
            if (stripOptions.include.some(pattern => 
              minimatch(id, pattern)
            )) {
              return stripClientOnlyCode(code, stripOptions.functions);
            }
          }
        }
      ]
    }
  }
};

// Example component using Composition API with uni-app
import { ref, onMounted } from 'vue';
import { isExternalUrl } from "@dcloudio/uni-cli-shared";

export default {
  setup() {
    const imageUrl = ref('');
    
    onMounted(() => {
      const url = '/static/images/banner.jpg';
      if (!isExternalUrl(url)) {
        // Process local image for current platform
        imageUrl.value = processAssetUrl(url);
      } else {
        imageUrl.value = url;
      }
    });
    
    return {
      imageUrl
    };
  }
};

import type { Plugin } from 'vite';
import { transformUniH5Jsx, isExternalUrl } from "@dcloudio/uni-cli-shared";

const uniVuePlugin = (): Plugin => {
  return {
    name: 'uni-vue-integration',
    configResolved(config) {
      // Configure JSX transformation
      if (config.command === 'build') {
        config.plugins.push(
          babel({
            plugins: [transformUniH5Jsx()]
          })
        );
      }
    },
    transformIndexHtml(html: string) {
      // Process HTML template with URL checking
      return html.replace(/src="([^"]+)"/g, (match, url) => {
        return isExternalUrl(url) ? match : `src="${processLocalUrl(url)}"`;
      });
    }
  };
};