Making something undocumented and experimental is always a nice way to explore the Web platform APIs. They were just HTML files and looked like that (I’ve made example shorter to show the main points): class MyPaint Conclusion The first thing I checked was tests as they are the best source of truth for the current implementation. I’ve started exploration opening links to changes related to Paint API.
I’m not a big expert in this language, but at least can understand what is going on. So I’ve decided to find an explanation there. There were links to the changed Safari source code in the release notes. Seems that the function tried to interpret path as a code. I’ve got the error again, but a different one – Synta圎rror: Unterminated regular expression literal '/paint.js'.
So I’ve tried different path variation: CSS. They have completely different JavaScript context and shouldn’t have access to any global data. There is a security-related restriction, similar to Web and Service Workers, that all Worklets code should be written in a separate file. Hm, addModule method should accept the path to the file with the custom painter implementation. addModule ( 'paint.js' ) Īnd got the same error again. So I’ve tried to load it manually in the console: CSS. That was confusing, I haven’t used any variable called “paint” in the Worklet class definition. Then I opened the console and there was an error – ReferenceError: Can't find variable: paint. When I’ve opened the inspector, I saw that background with paint function was applied to the element. That means that fallback value hasn’t applied, because I’ve used black color for it. Instead of four circles, there was the white background on the screen. So I’ve navigated to the basic Paint Worklet demo… and it was dead 😭. They were working in Chrome, but some of them need Chrome Canary because some of the other Houdini parts are used there. Before I was going to start my experiments, I decided to try demos I’ve created before. To enable Paint API in Safari TP you need to go to “Develop” ➡ “Experimental Features” menu and toggle “CSS Painting API” option. As a Chrome user I’ve started to look for some flags settings tab, but no luck. Then you need to find how to enable experimental API. The good thing is that it should get updates from the App Store. You can’t find Safari TP in App Store, you need to download it manually from. The first challenge was to make an initial setup 🤓. But in the version 72 release the changelog I saw exciting news – it is possible to pass as an input property to the Paint Worklet 🤩. The first implementation was shipped with Safari Technology Preview (TP) 69. As a big fan of CSS Houdini, I was so happy that Safari team decided to take Paint API in development.
0 kommentar(er)
