Usage with asset

[Vincz]

It would be great to be able to use the asset symfony helper with the bundle. The way it works usually is by reading a manifest file in the build directory in order to resolve the asset path. Not sure if it is possible to generate such a file with vite but it would be awesome.

[WebMechanic]

Vite does so by adding the following to vite.config.js

build: {
  manifest: true,
  outDir: './dist/build',
}

This will create a manifest.json in the outDir directory.

I don't know if this is a standard format or identical to Webpack's output so Encore/Twig accept it, but here's one entry:

  "src/utils/cqfill.js": {
    "file": "cqfill.261abc4c.js",
    "src": "src/utils/cqfill.js",
    "isDynamicEntry": true
  },

haven't tested this yet 'cos I'm still on Encore/Webpack bundle, trying to migrate away to use Vite and Rollup. I hope this package does the job :D

[svondervoort]

Doesn't seem to include images (in public/resources/images) it copies from the public to public/build. They are not included in the manifest.json.

[lhapaipai]

Hi @Vincz , The manifest created by Webpack encore bundle and that of Vite are not the same. so it cannot be used in this state by the twig asset function.

However, there would still be solutions. We can generate an assets.json compatible file and specify the name of the file in the Symfony configuration.

# config/packages/assets.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

but before I would like to know what is the point of doing all this? if the assets are imported in a js file we don't have to worry about it. if not why not put the files directly in the public folder and use your asset twig function ?

[Vincz]

Hi Hugues. Yes, you are right, we could still convert the manifest or maybe create a new asset resolver (I can look into it if you want). The point is that sometimes, even if the app is fully JS (react, vue, etc...), we need some ways to access the assets for email for example or for a PHP page or something and in this case, it's nice to be able to use the assets from the ./assets folder without having to copy them into the public directory.

[lhapaipai]

I am going to propose something to you, and on the other hand I would like you to give me your opinion on it before putting this in a new version

[lhapaipai]

hello @Vincz and @WebMechanic @well-made can you please give me your feedback of the #19 ?

you will have to clone the lhapaipai/vite-bundle and lhapaipai/vite-plugin-symfony repositories.

git clone https://github.com/lhapaipai/vite-plugin-symfony.git
cd vite-plugin-symfony
git checkout feature/asset
npm install
npm run dev

cd ..

git clone https://github.com/lhapaipai/vite-bundle.git
cd vite-bundle
git chekcout feature/asset

In your symfony projet, update your composer.json

{
    "repositories": [
        {
            "type": "path",
            "url": "<path-to-your>/vite-bundle"
        }
    ]
}

composer install

and

npm install <path-to-your>/vite-plugin-symfony

in order to have a package.json like this

{

    "dependencies": {
        "vite": "^2.9.13",
        "vite-plugin-symfony": "file:<path-to-your>/vite-plugin-symfony"
    }
}

note that this new version use vite 2.9 Documentation can be found here : https://github.com/lhapaipai/vite-bundle/tree/feature/asset#symfony-asset-component

If you have question don't hesitate.

[lhapaipai]

There is a small problem that I couldn't solve. if you specify a wrong asset path the application will not crash with the dev server soon but only after compiling.

indeed I did not find a way to retrieve the list of assets with the dev server because no manifest file is generated by vite

[AnnaYuS]

This is an interesting discussion. I'm using vite-bundle and trying to use the asset to load a css file in a twig template. I tried adding the path to the css file into vite config as an entrypoint:

build: {
    manifest: true,
    emptyOutDir: true,
    assetsDir: '',
    outDir: 'public/build/',
    rollupOptions: {
      input: {
        app: resolve(__dirname, './src/main.ts'),
        tinymce: resolve(__dirname, './css/tinymce.css'),
      },
    },
  },

but when i run vite builld i'm getting this error: [symfony] Entrypoint css/tinymce.css not defined in the manifest error during build:...

Is it possible that the fix you are discussing would help with this problem?

Also if i don't add the entrypoint, the css file is generated but it is not included into the manifest

[lhapaipai]

hi @AnnaYuS, I think this PR #19 can resolve your problem. Another way can be to create new twig functions vite_entry_css_file(s) / vite_entry_js_file(s) to get only the url of your entrypoints. you can test this PR and give me your feedback. I don't use these features too much so I prefer to have feedback before merging.

[AnnaYuS]

I've managed to solve the problem that i had without using asset. It's more of a workaround because i do not use url for the css file. The import path in js needs to have ?inline: import contentCss from '../css/tinymce.css?inline' then it's not loaded into the page head as style, but is processed and returned as a string and then can be added where it's needed.

I would think that this should work for css assets https://vitejs.dev/guide/assets.html#explicit-url-imports but in prod mode the url becomes base64 data URL and this doesn't work in my case

[lhapaipai]

and with ?url like in https://vitejs.dev/guide/assets.html#explicit-url-imports

[lhapaipai]

Hi with this new version of vite-bundle (v2.0) we have a compatible bundle with vitejs v3 and we have symfony assets management. check the doc for the configuration of the ViteAssetVersionStrategy https://github.com/lhapaipai/vite-bundle#symfony-asset-component. Enjoy