Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: ๐Ÿ“Œ Fixed sample code in Minimum SFC. #280

Merged

Conversation

madogiwa0124
Copy link
Contributor

Description

In the step for adding option to generate, it seemed necessary to add option to the arguments of genNode and genElement as well.

https://github.com/Ubugeeei/chibivue/blob/v0.0.8/book/impls/10_minimum_example/070_sfc_compiler3/packages/compiler-core/codegen.ts

Therefore, genNode and genElement with added arguments were also added to the sample code.

ไธ€ๆ™‚็š„ใชๅฏพๅฟœใชใฎใงใ‚ใพใ‚ŠๅŽณๆ ผใงใฏใชใ„ใฎใงใ™ใŒใ€ๆฆ‚ใญๅ‹•ไฝœใ™ใ‚‹ใ‚ˆใ†ใซใชใ‚‹ใจๆ€ใ„ใพใ™ใ€‚

export const generate = (
  {
    children,
  }: {
    children: TemplateChildNode[]
  },
  option: Required<CompilerOptions>,
): string => {
  // isBrowser ใŒ false ใฎๅ ดๅˆใฏ with ๆ–‡ใ‚’ๅซใพใชใ„ใ‚ณใƒผใƒ‰ใ‚’็”Ÿๆˆใ™ใ‚‹
  return `${option.isBrowser ? 'return ' : ''}function render(_ctx) {
    ${option.isBrowser ? 'with (_ctx) {' : ''}
      const { h } = ChibiVue;
      return ${genNode(children[0], option)};
    ${option.isBrowser ? '}' : ''}
}`
}

// .
// .
// .

const genProp = (
  prop: AttributeNode | DirectiveNode,
  option: Required<CompilerOptions>,
): string => {
  switch (prop.type) {
    case NodeTypes.ATTRIBUTE:
      return `${prop.name}: "${prop.value?.content}"`
    case NodeTypes.DIRECTIVE: {
      switch (prop.name) {
        case 'on':
          return `${toHandlerKey(prop.arg)}: ${
            option.isBrowser ? '' : '_ctx.' // -------------------- ใ“ใ“
          }${prop.exp}`
        default:
          // TODO: other directives
          throw new Error(`unexpected directive name. got "${prop.name}"`)
      }
    }
    default:
      throw new Error(`unexpected prop type.`)
  }
}

// .
// .
// .

const genInterpolation = (
  node: InterpolationNode,
  option: Required<CompilerOptions>,
): string => {
  return `${option.isBrowser ? '' : '_ctx.'}${node.content}` // ------------ ใ“ใ“
}

https://ubugeeei.github.io/chibivue/10-minimum-example/090-minimum-sfc.html#template-%E9%83%A8%E5%88%86%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%8F%E3%82%9A%E3%82%A4%E3%83%AB

Test

I have confirmed that the check action was successful.

https://github.com/madogiwa0124/chibivue/actions/runs/8917212290/job/24489904378

In the step for adding `option` to `generate`, it seemed necessary to add `option` to the arguments of `genNode` and `genElement` as well.

https://github.com/Ubugeeei/chibivue/blob/v0.0.8/book/impls/10_minimum_example/070_sfc_compiler3/packages/compiler-core/codegen.ts

Therefore, `genNode` and `genElement` with added arguments were also added to the sample code.

> ไธ€ๆ™‚็š„ใชๅฏพๅฟœใชใฎใงใ‚ใพใ‚ŠๅŽณๆ ผใงใฏใชใ„ใฎใงใ™ใŒใ€ๆฆ‚ใญๅ‹•ไฝœใ™ใ‚‹ใ‚ˆใ†ใซใชใ‚‹ใจๆ€ใ„ใพใ™ใ€‚
>
> ```ts
> export const generate = (
>   {
>     children,
>   }: {
>     children: TemplateChildNode[]
>   },
>   option: Required<CompilerOptions>,
> ): string => {
>   // isBrowser ใŒ false ใฎๅ ดๅˆใฏ with ๆ–‡ใ‚’ๅซใพใชใ„ใ‚ณใƒผใƒ‰ใ‚’็”Ÿๆˆใ™ใ‚‹
>   return `${option.isBrowser ? 'return ' : ''}function render(_ctx) {
>     ${option.isBrowser ? 'with (_ctx) {' : ''}
>       const { h } = ChibiVue;
>       return ${genNode(children[0], option)};
>     ${option.isBrowser ? '}' : ''}
> }`
> }
>
> // .
> // .
> // .
>
> const genProp = (
>   prop: AttributeNode | DirectiveNode,
>   option: Required<CompilerOptions>,
> ): string => {
>   switch (prop.type) {
>     case NodeTypes.ATTRIBUTE:
>       return `${prop.name}: "${prop.value?.content}"`
>     case NodeTypes.DIRECTIVE: {
>       switch (prop.name) {
>         case 'on':
>           return `${toHandlerKey(prop.arg)}: ${
>             option.isBrowser ? '' : '_ctx.' // -------------------- ใ“ใ“
>           }${prop.exp}`
>         default:
>           // TODO: other directives
>           throw new Error(`unexpected directive name. got "${prop.name}"`)
>       }
>     }
>     default:
>       throw new Error(`unexpected prop type.`)
>   }
> }
>
> // .
> // .
> // .
>
> const genInterpolation = (
>   node: InterpolationNode,
>   option: Required<CompilerOptions>,
> ): string => {
>   return `${option.isBrowser ? '' : '_ctx.'}${node.content}` // ------------ ใ“ใ“
> }
> ```
>
> https://ubugeeei.github.io/chibivue/10-minimum-example/090-minimum-sfc.html#template-%E9%83%A8%E5%88%86%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%8F%E3%82%9A%E3%82%A4%E3%83%AB
@Ubugeeei Ubugeeei merged commit ea1c2ad into Ubugeeei:main May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants