kn-es-features 1.0.0

package/src/features/es2026/05-import-attributes.js

@@ -0,0 +1,86 @@
+/**
+ * ES2026 —— Import Attributes（导入断言 / 导入属性）
+ *
+ * 允许在 import 语句中附加类型属性，指定导入模块的预期类型：
+ *   import data from './data.json'  with { type: 'json' }
+ *   import css  from './style.css'  with { type: 'css'  }
+ *
+ * 主要解决的问题：
+ *   - 防止将非 JS 文件误当作 JS 模块执行（MIME 混淆攻击）
+ *   - 明确告知宿主环境如何解析该模块
+ *
+ * 注意：宿主环境（浏览器/Node.js）决定支持哪些 type 值。
+ *       type: 'json' 是最广泛支持的选项。
+ */
+import { createSuite } from '../../utils/runner.js'
+
+export async function testImportAttributes() {
+  const { test, assert, getResults } = createSuite('Import Attributes (ES2026)')
+
+  // 检测语法支持（with 是新语法）
+  const syntaxSupported = (() => {
+    try {
+      // 用 Function 构造器检测 import with 语法是否被解析器接受
+      new Function(`import('data:text/javascript,export default 1', { with: { type: 'javascript' } })`)
+      return true
+    } catch { return false }
+  })()
+
+  test('动态 import() 支持 with 选项对象', async () => {
+    if (!syntaxSupported) { assert(true, '(跳过：环境不支持 import with 语法)'); return }
+    // 使用 data: URL + type: javascript 测试动态导入属性
+    let result = null
+    try {
+      const mod = await import('data:text/javascript,export default "hello"', {
+        with: { type: 'javascript' }
+      })
+      result = mod.default
+    } catch {
+      // 某些环境允许语法但不允许 data: URL，也视为语法支持
+      result = 'syntax-ok'
+    }
+    assert(result === 'hello' || result === 'syntax-ok', 'import with 语法应被环境支持')
+  })
+
+  test('import with 选项中 type 属性为字符串', () => {
+    // 验证属性结构正确性（不依赖实际 import）
+    const options = { with: { type: 'json' } }
+    assert(typeof options.with.type === 'string',    'type 属性应为字符串')
+    assert(options.with.type === 'json',             'json type 应正确设置')
+  })
+
+  test('import() 的第二个参数结构', () => {
+    // 动态 import() 语法：import(specifier, options)
+    // options.with 是属性映射，type 是最常用的键
+    const validOptions = [
+      { with: { type: 'json' } },
+      { with: { type: 'css'  } },
+      { with: { type: 'javascript' } },
+    ]
+    validOptions.forEach(opt => {
+      assert(opt.with !== undefined,              'options.with 应存在')
+      assert(typeof opt.with.type === 'string',   'type 应为字符串')
+    })
+    assert(true, 'import() 选项结构验证通过')
+  })
+
+  test('JSON 模块导入属性防止 MIME 混淆（原理说明）', () => {
+    // 不带 type: 'json'，浏览器可能将 JSON 文件当作 JS 执行 → 安全风险
+    // 带 type: 'json'，浏览器验证 MIME 类型必须是 application/json
+    // 本测试验证该概念的正确性
+    const requiresType = true // JSON 模块必须声明 type: 'json'
+    assert(requiresType, 'JSON 模块导入应声明 type: "json" 防止 MIME 混淆攻击')
+  })
+
+  test('import with 仅传递元信息，不影响模块标识符', () => {
+    // 同一个 URL + 不同 type → 实际上是不同的模块缓存键
+    // 但模块说明符（specifier）本身不变
+    const specifier = './data.json'
+    const opts1 = { with: { type: 'json' } }
+    const opts2 = { with: { type: 'json' } }
+    assert(specifier === './data.json', '模块说明符不应被 with 属性修改')
+    assert(opts1.with.type === opts2.with.type, '相同 type 的 options 应等价')
+  })
+
+  return getResults()
+}

package/src/index.js

@@ -0,0 +1,166 @@
+// ── ES2015 特性 ──────────────────────────────────────────────────────────────
+import { testLetConst }            from './features/es2015/01-let-const.js'
+import { testArrowFunctions }      from './features/es2015/02-arrow-functions.js'
+import { testTemplateLiterals }    from './features/es2015/03-template-literals.js'
+import { testDestructuring }       from './features/es2015/04-destructuring.js'
+import { testDefaultRestSpread }   from './features/es2015/05-default-rest-spread.js'
+import { testClasses }             from './features/es2015/06-classes.js'
+import { testPromises }            from './features/es2015/07-promises.js'
+import { testSymbols }             from './features/es2015/08-symbols.js'
+import { testIteratorsGenerators } from './features/es2015/09-iterators-generators.js'
+import { testMapSet }              from './features/es2015/10-map-set.js'
+import { testProxyReflect }        from './features/es2015/11-proxy-reflect.js'
+import { testEnhancedObjects }     from './features/es2015/12-enhanced-objects.js'
+import { testNewMethods }          from './features/es2015/13-new-methods.js'
+import { testModules }             from './features/es2015/14-modules.js'
+import { testBinaryOctalUnicode }  from './features/es2015/15-binary-octal-unicode.js'
+import { testForOf }               from './features/es2015/16-for-of.js'
+import { testMapGetOrInsert }      from './features/es2015/17-map.js'
+
+// ── ES2022 特性 ──────────────────────────────────────────────────────────────
+import { testClassFields }        from './features/es2022/01-class-fields.js'
+import { testClassStaticBlocks }  from './features/es2022/02-class-static-blocks.js'
+import { testAtMethod }           from './features/es2022/03-at-method.js'
+import { testObjectHasOwn }       from './features/es2022/04-object-has-own.js'
+import { testErrorCause }         from './features/es2022/05-error-cause.js'
+import { testRegExpDFlag }        from './features/es2022/06-regexp-d-flag.js'
+import { testTopLevelAwait }      from './features/es2022/07-top-level-await.js'
+
+// ── ES2025 特性 ──────────────────────────────────────────────────────────────
+import { testIteratorHelpers }       from './features/es2025/01-iterator-helpers.js'
+import { testSetMethods }            from './features/es2025/02-set-methods.js'
+import { testPromiseTry }            from './features/es2025/03-promise-try.js'
+import { testRegExpDuplicateGroups } from './features/es2025/04-regexp-duplicate-groups.js'
+import { testUint8ArrayBase64Hex }   from './features/es2025/05-uint8array-base64-hex.js'
+import { testJsonParseSource }       from './features/es2025/06-json-parse-source.js'
+import { testErrorIsError }          from './features/es2025/07-error-is-error.js'
+import { testFloat16Array }          from './features/es2025/08-float16array.js'
+
+// ── ES2026 特性 ──────────────────────────────────────────────────────────────
+import { testMathSumPrecise }              from './features/es2026/01-math-sum-precise.js'
+import { testRegExpEscape }                from './features/es2026/02-regexp-escape.js'
+import { testExplicitResourceManagement }  from './features/es2026/03-explicit-resource-management.js'
+import { testAtomicsPause }                from './features/es2026/04-atomics-pause.js'
+import { testImportAttributes }            from './features/es2026/05-import-attributes.js'
+
+import { printResults } from './utils/runner.js'
+
+// ── 测试套件注册表 ──────────────────────────────────────────────────────────
+
+const suites2015 = [
+  { name: 'let & const',                   fn: testLetConst },
+  { name: '箭头函数',                      fn: testArrowFunctions },
+  { name: '模板字符串',                    fn: testTemplateLiterals },
+  { name: '解构赋值',                      fn: testDestructuring },
+  { name: '默认参数 / Rest / Spread',      fn: testDefaultRestSpread },
+  { name: '类(Class)',                     fn: testClasses },
+  { name: 'Promise & async/await',         fn: testPromises },
+  { name: 'Symbol',                        fn: testSymbols },
+  { name: '迭代器与生成器',                fn: testIteratorsGenerators },
+  { name: 'Map & Set & WeakMap & WeakSet', fn: testMapSet },
+  { name: 'Proxy & Reflect',               fn: testProxyReflect },
+  { name: '增强对象字面量',                fn: testEnhancedObjects },
+  { name: '新增内置方法',                  fn: testNewMethods },
+  { name: '模块(Modules)',                 fn: testModules },
+  { name: '进制字面量与 Unicode',          fn: testBinaryOctalUnicode },
+  { name: 'for...of',                      fn: testForOf },
+  { name: 'Map getOrInsert',               fn: testMapGetOrInsert },
+]
+
+const suites2022 = [
+  { name: 'Class Fields（私有字段 / 静态字段）', fn: testClassFields },
+  { name: 'Class Static Blocks',               fn: testClassStaticBlocks },
+  { name: 'Array / String .at()',              fn: testAtMethod },
+  { name: 'Object.hasOwn()',                   fn: testObjectHasOwn },
+  { name: 'Error Cause',                       fn: testErrorCause },
+  { name: 'RegExp /d flag（匹配索引）',         fn: testRegExpDFlag },
+  { name: 'Top-level await',                   fn: testTopLevelAwait },
+]
+
+const suites2025 = [
+  { name: 'Iterator Helpers',                      fn: testIteratorHelpers },
+  { name: 'New Set Methods',                       fn: testSetMethods },
+  { name: 'Promise.try',                           fn: testPromiseTry },
+  { name: 'RegExp Duplicate Named Capture Groups', fn: testRegExpDuplicateGroups },
+  { name: 'Uint8Array Base64 / Hex',               fn: testUint8ArrayBase64Hex },
+  { name: 'JSON.parse Source Text Access',         fn: testJsonParseSource },
+  { name: 'Error.isError',                         fn: testErrorIsError },
+  { name: 'Float16Array',                          fn: testFloat16Array },
+]
+
+const suites2026 = [
+  { name: 'Math.sumPrecise()',              fn: testMathSumPrecise },
+  { name: 'RegExp.escape()',               fn: testRegExpEscape },
+  { name: 'Explicit Resource Management', fn: testExplicitResourceManagement },
+  { name: 'Atomics.pause()',              fn: testAtomicsPause },
+  { name: 'Import Attributes',            fn: testImportAttributes },
+]
+
+// ── 核心运行函数 ──────────────────────────────────────────────────────────────
+
+async function runSuites(suites) {
+  const allResults = []
+  for (const suite of suites) {
+    const results = await suite.fn()
+    allResults.push(...results)
+  }
+  return allResults
+}
+
+/** 运行 ES2015 测试 */
+export async function runAll2015() { return runSuites(suites2015) }
+
+/** 运行 ES2022 测试 */
+export async function runAll2022() { return runSuites(suites2022) }
+
+/** 运行 ES2025 测试 */
+export async function runAll2025() { return runSuites(suites2025) }
+
+/** 运行 ES2026 测试 */
+export async function runAll2026() { return runSuites(suites2026) }
+
+/** 运行全部测试（所有版本） */
+export async function runAll() {
+  return runSuites([...suites2015, ...suites2022, ...suites2025, ...suites2026])
+}
+
+/** 运行全部测试并分版本打印结果 */
+export async function runAndPrint() {
+  for (const [label, fn] of [
+    ['ES2015', runAll2015],
+    ['ES2022', runAll2022],
+    ['ES2025', runAll2025],
+    ['ES2026', runAll2026],
+  ]) {
+    console.log(`\n=== ${label} 特性测试 ===\n`)
+    printResults(await fn())
+  }
+}
+
+// ── 按版本导出各测试函数 ─────────────────────────────────────────────────────
+
+// ES2015
+export {
+  testLetConst, testArrowFunctions, testTemplateLiterals, testDestructuring,
+  testDefaultRestSpread, testClasses, testPromises, testSymbols,
+  testIteratorsGenerators, testMapSet, testProxyReflect, testEnhancedObjects,
+  testNewMethods, testModules, testBinaryOctalUnicode, testForOf, testMapGetOrInsert,
+}
+
+// ES2022
+export {
+  testClassFields, testClassStaticBlocks, testAtMethod,
+  testObjectHasOwn, testErrorCause, testRegExpDFlag, testTopLevelAwait,
+}
+
+// ES2025
+export {
+  testIteratorHelpers, testSetMethods, testPromiseTry, testRegExpDuplicateGroups,
+  testUint8ArrayBase64Hex, testJsonParseSource, testErrorIsError, testFloat16Array,
+}
+
+// ES2026
+export {
+  testMathSumPrecise, testRegExpEscape, testExplicitResourceManagement,
+  testAtomicsPause, testImportAttributes,
+}

package/src/main.js

@@ -0,0 +1,226 @@
+(function () {
+  'use strict'
+
+  /* ── 版本配置（数据驱动，新增版本只需加这里）─────────────────── */
+  const VERSIONS = [
+    { key: '2015', run: function () { return EsFeatures.runAll2015() } },
+    { key: '2022', run: function () { return EsFeatures.runAll2022() } },
+    { key: '2025', run: function () { return EsFeatures.runAll2025() } },
+    { key: '2026', run: function () { return EsFeatures.runAll2026() } },
+  ]
+
+  /* ── DOM 引用 ────────────────────────────────────────────────────── */
+  const btnRun   = document.getElementById('btn-run')
+  const valTotal = document.getElementById('val-total')
+  const tabs     = document.querySelectorAll('.tab')
+
+  /* ── Tab 切换 ────────────────────────────────────────────────────── */
+  tabs.forEach(function (tab) {
+    tab.addEventListener('click', function () {
+      tabs.forEach(function (t) { t.classList.remove('tab--active') })
+      tab.classList.add('tab--active')
+      document.querySelectorAll('.panel').forEach(function (p) {
+        p.classList.remove('panel--active')
+      })
+      document.getElementById(tab.dataset.panel).classList.add('panel--active')
+    })
+  })
+
+  /* ── 工具函数 ────────────────────────────────────────────────────── */
+
+  function escape(str) {
+    return String(str)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+  }
+
+  function groupBySuite(results) {
+    const suites = []
+    const map    = Object.create(null)
+    results.forEach(function (r) {
+      if (!map[r.suite]) {
+        const s = { name: r.suite, cases: [] }
+        map[r.suite] = s
+        suites.push(s)
+      }
+      map[r.suite].cases.push(r)
+    })
+    return suites
+  }
+
+  function calcStats(results) {
+    let pass = 0, fail = 0
+    results.forEach(function (r) { r.status === 'pass' ? pass++ : fail++ })
+    return { pass: pass, fail: fail, total: results.length }
+  }
+
+  /* ── 渲染函数 ────────────────────────────────────────────────────── */
+
+  function renderCase(c) {
+    const li   = document.createElement('li')
+    li.className = 'case case--' + c.status
+
+    const icon = document.createElement('span')
+    icon.className  = 'case__icon'
+    icon.textContent = c.status === 'pass' ? '✓' : '✗'
+
+    const body = document.createElement('span')
+    body.className = 'case__body'
+
+    const name = document.createElement('span')
+    name.className  = 'case__name'
+    name.textContent = c.case
+    body.appendChild(name)
+
+    if (c.error) {
+      const err = document.createElement('span')
+      err.className  = 'case__error'
+      err.textContent = c.error
+      body.appendChild(err)
+    }
+
+    li.appendChild(icon)
+    li.appendChild(body)
+    return li
+  }
+
+  function renderSuite(suite) {
+    let pass = 0, fail = 0
+    suite.cases.forEach(function (c) { c.status === 'pass' ? pass++ : fail++ })
+    const allPass  = fail === 0
+    const stateKey = allPass ? 'pass' : 'fail'
+
+    const card = document.createElement('div')
+    card.className = 'suite'
+
+    const header = document.createElement('div')
+    header.className = 'suite__header'
+    header.innerHTML =
+      '<div class="suite__header-left">' +
+        '<span class="suite__indicator suite__indicator--' + stateKey + '"></span>' +
+        '<span class="suite__name">' + escape(suite.name) + '</span>' +
+      '</div>' +
+      '<div class="suite__header-right">' +
+        '<span class="suite__stat suite__stat--' + stateKey + '">' +
+          pass + ' / ' + suite.cases.length +
+        '</span>' +
+        '<span class="suite__chevron">▾</span>' +
+      '</div>'
+
+    header.addEventListener('click', function () {
+      card.classList.toggle('suite--collapsed')
+    })
+
+    const ul = document.createElement('ul')
+    ul.className = 'suite__cases'
+    suite.cases.forEach(function (c) { ul.appendChild(renderCase(c)) })
+
+    card.appendChild(header)
+    card.appendChild(ul)
+    return card
+  }
+
+  function showLoader(panel) {
+    panel.innerHTML =
+      '<div class="loader">' +
+        '<span class="loader__spinner"></span>' +
+        '<span>正在运行测试…</span>' +
+      '</div>'
+  }
+
+  function renderPanel(panel, results) {
+    panel.innerHTML = ''
+    if (!results || results.length === 0) {
+      panel.innerHTML =
+        '<div class="placeholder">' +
+          '<span class="placeholder__icon">📭</span>' +
+          '<p class="placeholder__text">暂无测试结果</p>' +
+        '</div>'
+      return
+    }
+    const frag = document.createDocumentFragment()
+    groupBySuite(results).forEach(function (s) { frag.appendChild(renderSuite(s)) })
+    panel.appendChild(frag)
+  }
+
+  function updateSummaryValue(id, stats) {
+    const el = document.getElementById('val-' + id)
+    if (!el) return
+    if (!stats) { el.textContent = '—'; el.className = 'summary__value'; return }
+    el.textContent = stats.pass + ' / ' + stats.total
+    el.className   = 'summary__value summary__value--' + (stats.fail === 0 ? 'pass' : 'fail')
+  }
+
+  function updateTabBadge(id, stats) {
+    const el = document.getElementById('badge-' + id)
+    if (!el) return
+    if (!stats) { el.textContent = ''; el.className = 'tab__badge'; return }
+    if (stats.fail === 0) {
+      el.textContent = '全部通过'
+      el.className   = 'tab__badge tab__badge--pass'
+    } else {
+      el.textContent = stats.fail + ' 失败'
+      el.className   = 'tab__badge tab__badge--fail'
+    }
+  }
+
+  /* ── 主运行流程 ──────────────────────────────────────────────────── */
+  async function runTests() {
+    btnRun.disabled = true
+    btnRun.classList.add('btn-run--running')
+    btnRun.querySelector('.btn-run__label').textContent = '运行中…'
+
+    // 重置统计
+    VERSIONS.forEach(function (v) {
+      updateSummaryValue(v.key, null)
+      updateTabBadge(v.key, null)
+      showLoader(document.getElementById('panel-' + v.key))
+    })
+    updateSummaryValue('total', null)
+
+    try {
+      // 并行运行所有版本
+      const resultSets = await Promise.all(
+        VERSIONS.map(function (v) { return v.run() })
+      )
+
+      let totalPass = 0, totalFail = 0, totalCount = 0
+
+      VERSIONS.forEach(function (v, i) {
+        const results = resultSets[i]
+        const stats   = calcStats(results)
+        renderPanel(document.getElementById('panel-' + v.key), results)
+        updateSummaryValue(v.key, stats)
+        updateTabBadge(v.key, stats)
+        totalPass  += stats.pass
+        totalFail  += stats.fail
+        totalCount += stats.total
+      })
+
+      updateSummaryValue('total', {
+        pass: totalPass, fail: totalFail, total: totalCount
+      })
+
+    } catch (err) {
+      VERSIONS.forEach(function (v) {
+        const panel = document.getElementById('panel-' + v.key)
+        if (panel) {
+          panel.innerHTML =
+            '<div class="placeholder">' +
+              '<span class="placeholder__icon">⚠️</span>' +
+              '<p class="placeholder__text">运行出错：' + escape(err.message) + '</p>' +
+            '</div>'
+        }
+      })
+      console.error('[ES 测试]', err)
+    }
+
+    btnRun.disabled = false
+    btnRun.classList.remove('btn-run--running')
+    btnRun.querySelector('.btn-run__label').textContent = '重新运行'
+  }
+
+  btnRun.addEventListener('click', runTests)
+})()

package/src/polyfills.js

@@ -0,0 +1,6 @@
+// core-js polyfill 入口：补齐目标浏览器（Chrome >= 40）缺失的 API
+// 此文件由 Vite 编译为 IIFE，在页面中作为普通 <script> 提前加载
+
+// 引入完整的现代特性补丁（涵盖 ES2015 到最新的特性）
+import 'core-js/stable';
+import 'regenerator-runtime/runtime'; // 如果需要兼容生成器函数

package/src/run.js

@@ -0,0 +1,3 @@
+import { runAndPrint } from './index.js'
+
+runAndPrint().catch(console.error)