Link stage example project

gistfile1.js

// main.js

// (1) Import the side effect module, this will be executed first
import './polyfill.js';

// (2) Import from external dependencies, this will be handled by external_import_binding_merger
import { useState } from 'react';

// (3) Import symbols from our core hub
// Rolldown needs to "root" the symbols here, find their original definitions
import { fetchedItem, formatValue, source, legacySource } from './helpers.js';

function App() {
  // Use external symbols
  const [item] = useState(fetchedItem);

  // Use internal linked symbols
  const displayValue = formatValue(item.value);
  
  console.log('Final Display Value:', displayValue); // Output: Final Display Value: [Formatted: 12300] (assuming API returns {id:1, value:123})
  console.log('Data source:', source); // Output: Data source: API
  console.log('Formatter source:', legacySource); // Output: Formatter source: Legacy CJS
}

App();


// --------------------------------
// polyfill.js

console.log('Polyfill loaded.');
if (!globalThis.customFeature) {
  globalThis.customFeature = () => 'This is a custom feature!';
}


// --------------------------------
// helpers.js

// Export all contents from api.js
// This includes fetchedItem and source
export * from './api.js';

// Import from CJS module and re-export
import formatter from './legacy-formatter.cjs';
// Re-export the default export of CJS as a named export
export { formatter as formatValue };

// Import from CJS module again, this time for its named export
import cjsModule from './legacy-formatter.cjs';
// Export the `source` variable, this will conflict with `source` from `./api.js`
export const legacySource = cjsModule.source;


// --------------------------------
// api.js

console.log('API module evaluation starts.');
// Use top-level await to make the entire dependency chain async
const response = await fetch('https://api.example.com/items/1');
const item = await response.json();

// Export a processed data
export const fetchedItem = { id: item.id, value: item.value * 100 };

// Export a normal variable, we will use it to create confusion
export const source = 'API'; 

console.log('API module evaluation finished.');


// --------------------------------
// legacy-formatter.cjs

// Use CommonJS export
module.exports = function formatValue(val) {
  return `[Formatted: ${val}]`;
};

// Also attach a property to the exports object
// This is important for demonstrating how Rolldown handles CJS named exports
module.exports.source = 'Legacy CJS';