Giter VIP home page Giter VIP logo

Comments (24)

wre232114 avatar wre232114 commented on May 27, 2024 1

Thanks for reporting issues. I'll make it less strict today and release @farmfe/[email protected]. For earlier versions, you can use html tags as placeholders like:

<div id="root">
  <div>app-html-to-replace</div>
</div>

from farm.

wre232114 avatar wre232114 commented on May 27, 2024 1

It's limited by SWC, you may have to use other placeholders like <meta head />, <meta styles /> in <head>.

from farm.

wre232114 avatar wre232114 commented on May 27, 2024 1

I see, I'll try pepka if I can

from farm.

wre232114 avatar wre232114 commented on May 27, 2024 1

I browsered code of fela-vue, it contains both import and dynamic import under dist/bundle.mjs. that's the cause of this issue. I also reproduced the error locally, I fixed this error and added a test case

from farm.

houd1ni avatar houd1ni commented on May 27, 2024 1

Wow, I've completely forgotten that it's there under runtime compression part! Will review it - maybe, there are better ways to achieve the same now. But this helped as a test πŸ˜„

from farm.

wre232114 avatar wre232114 commented on May 27, 2024

please try @farmfe/[email protected]

from farm.

houd1ni avatar houd1ni commented on May 27, 2024 
 > npm i @farmfe/[email protected]


added 1 package, removed 1 package, changed 1 package, and audited 806 packages in 10s

190 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


> npm run d-dev

> [email protected] d-dev
> farm start ./d-c ./.../farm.config.ts

[ Farm ] Using config file at C:\Users\...farm.config.ts
[ Farm ] Port 9000 is in use, trying another one...
[ Farm ] Port 9001 is in use, trying another one...
[ building ] β ‚ transform (15) ../node_modules/@farmfe/runtime-plugin-hmr/src/overlay.ts.farm-runtime                                         [ Farm ] Failed to start the server: Error: Parse `index.html` failed.
 Error: Parse `index.html` failed.
 Error:
  Γ— Stray end tag "head"
   ╭─[index.html:4:1]
 4 β”‚     <meta charset="utf-8" />
 5 β”‚     {head}
 6 β”‚     {styles}
 7 β”‚   </head>
   Β·   ───────
 8 β”‚   <body>
 9 β”‚     <div id="app">{ssr}</div>
 9 β”‚     <script type="module" src="./src/main.ts"></script>
   ╰────

  Γ— Start tag "body" seen but an element of the same type was already open
    ╭─[index.html:5:1]
  5 β”‚     {head}
  6 β”‚     {styles}
  7 β”‚   </head>
  8 β”‚   <body>
    Β·   ──────
  9 β”‚     <div id="app">{ssr}</div>
 10 β”‚     <script type="module" src="./src/main.ts"></script>
 10 β”‚   </body>
    ╰────

from farm.

wre232114 avatar wre232114 commented on May 27, 2024

It works in our example: https://github.com/farm-fe/farm/blob/main/examples/react-ssr/index.html#L10

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

It works in our example: https://github.com/farm-fe/farm/blob/main/examples/react-ssr/index.html#L10

Yep, but not in <head>

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

So sad. Thank you anyway, - I'll try.

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

I've tried to workaround this by using the plugin system to avoid changing backend logic, but got an error.

I want to transform it to meta stuff you've suggested, then in the very end reverse those.

What I do:

plugins: [
    {
      name: '[clean html templating before]',
      priority: 200,
      transform: {
        filters: { sources: [/^.*\.html$/], moduleTypes: ['html'] },
        executor: async (param) => {
          const {content} = param
          if(content) param.content = getTmpl(content)({
            head: '<meta head />',
            styles: '<meta head />',
            ssr: '<meta ssr />'
          })
          return param
        }
      }
    },
    { // No error without this plugin.
      name: '[clean html templating after]',
      transformHtml: {
        executor: ({htmlResource}) => {
          htmlResource.bytes = [...Buffer.from(
            Buffer.from(htmlResource as any)
            .toString()
            .replace(/<meta (\w+?) \/>/g, '{$1}')
          )]
          return htmlResource
        }
      }
    }
  ]

What I get using almost the sample code https://www.farmfe.org/docs/api/js-plugin-api#transformhtml :
image

with backtrace 1
image

with backtrace full

[ Farm ] Port 9000 is in use, trying another one...
[ building ] β „ render index_a27d
thread '<unnamed>' panicked at crates\node\src\plugin_adapters\js_plugin_adapter\thread_safe_js_plugin_hook.rs:186:34:
called `Result::unwrap()` on an `Err` value: Error { status: InvalidArg, reason: "", maybe_raw: 0x0 }
stack backtrace:
   0:     0x7fff1d8f20c5 - napi_register_module_v1
   1:     0x7fff1d3e2f0d - <unknown>
   2:     0x7fff1d8d7fe1 - napi_register_module_v1
   3:     0x7fff1d8f450a - napi_register_module_v1
   4:     0x7fff1d8f3e6f - napi_register_module_v1
   5:     0x7fff1d8f4c01 - napi_register_module_v1
   6:     0x7fff1d8f4725 - napi_register_module_v1
   7:     0x7fff1d8f4669 - napi_register_module_v1
   8:     0x7fff1d8f4654 - napi_register_module_v1
   9:     0x7fff1e133807 - wasmer_vm_imported_memory32_atomic_notify
  10:     0x7fff1e133db3 - wasmer_vm_imported_memory32_atomic_notify
  11:     0x7fff1d68b908 - farm_swc_transform_react
  12:     0x7fff1d692577 - farm_swc_transform_react
  13:     0x7ff707dcdc27 - node_module_register
  14:     0x7ff707dcd55d - node_module_register
  15:     0x7ff707e89d1b - uv_update_time
  16:     0x7ff707e89854 - uv_run
  17:     0x7ff707e5ad52 - node::SpinEventLoop
  18:     0x7ff707d44513 - ENGINE_get_load_privkey_function
  19:     0x7ff707dd890d - node::Start
  20:     0x7ff707dd79d7 - node::Start
  21:     0x7ff707b6d8ac - AES_cbc_encrypt
  22:     0x7ff709218238 - inflateValidate
  23:     0x7fffacc87344 - BaseThreadInitThunk
  24:     0x7ffface426b1 - RtlUserThreadStart

from farm.

wre232114 avatar wre232114 commented on May 27, 2024

make transformIndex async:

transformHtml: {
        executor: async ({htmlResource}) => {}
}

The docs needs to be updated

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

The change
image

results in
image

from farm.

wre232114 avatar wre232114 commented on May 27, 2024

I tested that this should work:

[
      {
        name: 'test-transform-html-pre',
        transformHtml: {
          order: 0, // 0 means call this hook before parse and generate resources
          executor: async ({ htmlResource }) => {
            const code = Buffer.from(htmlResource.bytes as any).toString();
            calledHooks.push('transformHtmlPre');
            const replacedCode = code
              .replace('{head}', '<meta head />')
              .replace('{style}', '<meta style />')
              .replace('{ssr}', '<meta ssr />');
            return {
              ...htmlResource,
              bytes: [...Buffer.from(replacedCode)]
            };
          }
        }
      },
      {
        name: 'test-transform-html-post',
        transformHtml: {
          order: 2, // 2 means call this hook after parse and generate resources
          executor: async ({ htmlResource }) => {
            calledHooks.push('transformHtmlPost');
            const replacedCode = Buffer.from(htmlResource.bytes as any)
              .toString()
              .replace(/<meta (\w+?)>/g, '{$1}');
            htmlResource.bytes = [...Buffer.from(replacedCode)];
            return htmlResource;
          }
        }
      }
    ]

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

Yep. I've rewritten it to match codestyle and removed calledHooks tracing. It compiles, but breaks the runtime: it throws, telling, that one of my library functions is not a function. It should be interesting in the compiler perspective and to improve docs, but I'd rather stick with <meta /> stuff, 'cause it now looks more safe πŸ˜„ Here's code btw:

plugins: [
    {
      name: '[test-transform-html-pre]',
      transformHtml: {
        order: 0, // 0 means call this hook before parse and generate resources
        executor: async ({ htmlResource }) => {
          htmlResource.bytes = [...Buffer.from(Buffer
            .from(htmlResource.bytes as any)
            .toString()
            .replace('{head}', '<meta head />')
            .replace('{styles}', '<meta style />')
            .replace('{ssr}', '<meta ssr />')
          )]
          return htmlResource
        }
      }
    },
    {
      name: '[test-transform-html-post]',
      transformHtml: {
        order: 2, // 2 means call this hook after parse and generate resources
        executor: async ({ htmlResource }) => {
          htmlResource.bytes = [...Buffer.from(Buffer
            .from(htmlResource.bytes as any)
            .toString()
            .replace(/<meta (\w+?) \/>/g, '{$1}')
          )]
          return htmlResource
        }
      }
    }
  ]

from farm.

wre232114 avatar wre232114 commented on May 27, 2024

It compiles, but breaks the runtime: it throws, telling, that one of my library functions is not a function.

Could you please provide more info about the runtime error

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

It compiles, but breaks the runtime: it throws, telling, that one of my library functions is not a function.

Could you please provide more info about the runtime error

image
it's from fela-vue precompressed library that uses pepka latest version.
image
The line from stack trace highlighted by blue.
image
And then it traces up to the application code.

And no such error with vite or without the transformations.

Just in case, the error look in chrome:
image

UPD: Seems that it has imported the whole lib as a plain object (I've breakpointed that):
image

from farm.

wre232114 avatar wre232114 commented on May 27, 2024

I can not reproduce the runtime error of fela-vue. could you provide a repo that can reproduce this error

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

I can not reproduce the runtime error of fela-vue. could you provide a repo that can reproduce this error

No, - it's a relatively large monorepo. I can cut it from there, but not very soon. Have you tried using complement function directly from pepka ?

from farm.

wre232114 avatar wre232114 commented on May 27, 2024

I think it's a issue related to lazy compilation(a guess based on the images above), i want to known is there a import('fela-vue') or import('pepka') in the project, so I can figure out what causes the error.

You can set lazyCompilation to false in farm.config.ts to see if the error solved.

from farm.

wre232114 avatar wre232114 commented on May 27, 2024

fixed in #1175 and will be released in @farmfe/[email protected]

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

fixed in #1175 and will be released in @farmfe/[email protected]

Nope, that's not that issue. Still there. Also, there's only one place where I use dynamic import, is to import icons.
Maybe you can put in App.vue (root vue component) this part of code to reproduce:

<template>
  <div :class="f('flex actions')">
    qwe
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { css, Renderer } from 'fela-vue'
import { qmergeDeep } from "pepka"
import { styl } from '@/styles'

const common = css`
  .common-class {
    color magenta
  }
`

const felaOptions= {
  defStyles: () => qmergeDeep(common, css`
    .flex {display flex}
  `),
  preset: { unit: ['rem', {}] },
  modifiers: { m: false },
  ssr: true
}

const renderer = new Renderer(felaOptions)
const styl = renderer.styl

const f = computed(() => styl(css`
  .actions {
    gap 2
    margin-top 2
    > *:not(:first-of-type) { margin-left 2 }
    @media (max-width: 1050px) { margin-top 1.25 }
  }
`))
</script>

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

upd: I was able to upgrade only to ver18. Therefore will try again with ver19 and report here.

from farm.

houd1ni avatar houd1ni commented on May 27, 2024

Yep! Looks like it works!

from farm.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.