passle

passle, 1 month ago

@bramus @DavidDarnes @Jbasoo This is cool, I recently created a syntax highlighting web component at work for our internal wiki thing, but it uses Shiki, not CSS Highlight.

Looking at Shiki, they do have a codeToTokens function, but it requires some internal (great naming 😀) thing to get passed to it which supposedly needs to initialize the langs/themes and I can't be bothered to figure that out right now, but seems like it should be doable

passle, 1 month ago

@bramus @DavidDarnes @Jbasoo Oh cool, you can just import it from the web bundle, not too bad. Funny enough it doesnt actually give you the tokens, but I guess you can differentiate based on the color values

https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy5qcyIsImNvbnRlbnQiOiJpbXBvcnQgeyBjb2RlVG9Ub2tlbnMgfSBmcm9tICdzaGlraS9idW5kbGUvd2ViJztcblxuY29uc3QgeyB0b2tlbnMgfSA9IGF3YWl0IGNvZGVUb1Rva2Vucyhjb2RlLnRleHRDb250ZW50LCB7IFxuICB0aGVtZTogJ25vcmQnLCBcbiAgbGFuZzogJ2pzJ1xufSk7XG5cbmNvbnNvbGUubG9nKHRva2Vucy5mbGF0KCkpO1xuIn0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxoZWFkPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3NpbXBsZS1ncmVldGluZy5qc1wiPjwvc2NyaXB0PlxuPC9oZWFkPlxuPGJvZHk-XG4gIDxkaXYgaWQ9XCJjb2RlXCI-XG4gICAgY29uc3QgZm9vID0gMTtcbiAgICBjb25zdCBiYXIgPSAyO1xuICA8L2Rpdj5cbiAgPHNpbXBsZS1ncmVldGluZyBuYW1lPVwiV29ybGRcIj48L3NpbXBsZS1ncmVldGluZz5cbjwvYm9keT5cbiJ9LHsibmFtZSI6InBhY2thZ2UuanNvbiIsImNvbnRlbnQiOiJ7XG4gIFwiZGVwZW5kZW5jaWVzXCI6IHtcbiAgICBcImxpdFwiOiBcIl4zLjAuMFwiLFxuICAgIFwiQGxpdC9yZWFjdGl2ZS1lbGVtZW50XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJsaXQtZWxlbWVudFwiOiBcIl40LjAuMFwiLFxuICAgIFwibGl0LWh0bWxcIjogXCJeMy4wLjBcIlxuICB9XG59IiwiaGlkZGVuIjp0cnVlfV0

passle, 1 month ago

@bramus @DavidDarnes @Jbasoo Hm, can anybody point out to me what I'm doing wrong here? I would have expected 4 different colors in the output, but im seeing only 2?

https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy5qcyIsImNvbnRlbnQiOiJpbXBvcnQgeyBjb2RlVG9Ub2tlbnMgfSBmcm9tICdzaGlraS9idW5kbGUvd2ViJztcblxuY29uc3QgeyB0b2tlbnMgfSA9IGF3YWl0IGNvZGVUb1Rva2Vucyhjb2RlLnRleHRDb250ZW50LCB7IFxuICB0aGVtZTogJ25vcmQnLCBcbiAgbGFuZzogJ2pzJ1xufSk7XG5cbmNvbnN0IGNvbG9yR3JvdXBzID0gdG9rZW5zLmZsYXQoKS5yZWR1Y2UoKGFjYywgY3VycikgPT4ge1xuICBjb25zdCByYW5nZSA9IG5ldyBSYW5nZSgpO1xuICByYW5nZS5zZXRTdGFydChjb2RlLmZpcnN0Q2hpbGQsIGN1cnIub2Zmc2V0KTtcbiAgcmFuZ2Uuc2V0RW5kKGNvZGUuZmlyc3RDaGlsZCwgY3Vyci5vZmZzZXQgKyBjdXJyLmNvbnRlbnQubGVuZ3RoKTtcbiAgY3Vyci5yYW5nZSA9IHJhbmdlO1xuICBhY2NbY3Vyci5jb2xvcl0gPSBbLi4uKGFjY1tjdXJyLmNvbG9yXSB8fCBbXSksIGN1cnJdO1xuICByZXR1cm4gYWNjO1xufSwge30pO1xuXG5jb25zb2xlLmxvZyhPYmplY3Qua2V5cyhjb2xvckdyb3VwcykubGVuZ3RoKTsgLy8gNFxuLy8gSSB3b3VsZCBoYXZlIGV4cGVjdGVkIDQgY29sb3JzIHRvIGhhdmUgYmVlbiBvdXRwdXQgaW4gdGhlIGBSZXN1bHRgP1xuXG5sZXQgaSA9IDA7XG5jb25zdCBuYW1lcyA9IFsnYScsICdiJywgJ2MnLCAnZCddO1xuZm9yIChjb25zdCBbY29sb3IsIGl0ZW1zXSBvZiBPYmplY3QuZW50cmllcyhjb2xvckdyb3VwcykpIHtcbiAgaSsrO1xuICBDU1MuaGlnaGxpZ2h0cy5zZXQobmFtZXNbaV0sIG5ldyBIaWdobGlnaHQoKSk7XG4gIGZvciAoY29uc3QgeyByYW5nZSB9IG9mIGl0ZW1zKSB7XG4gICAgQ1NTLmhpZ2hsaWdodHMuZ2V0KG5hbWVzW2ldKS5hZGQocmFuZ2UpO1xuICB9XG59In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxoZWFkPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3NpbXBsZS1ncmVldGluZy5qc1wiPjwvc2NyaXB0PlxuICA8c3R5bGU-XG4gICAgOjpoaWdobGlnaHQoYSkge1xuICAgICAgY29sb3I6IHJlZDtcbiAgICB9XG4gICAgXG4gICAgOjpoaWdobGlnaHQoYikge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgfVxuICAgIFxuICAgIDo6aGlnaGxpZ2h0KGMpIHtcbiAgICAgIGNvbG9yOiBncmVlbjtcbiAgICB9XG4gICAgXG4gICAgOjpoaWdobGlnaHQoZCkge1xuICAgICAgY29sb3I6IHB1cnBsZTtcbiAgICB9XG4gIDwvc3R5bGU-XG48L2hlYWQ-XG48Ym9keT5cbiAgPGRpdiBpZD1cImNvZGVcIj5cbiAgICBjb25zdCBmb28gPSAxO1xuICAgIGNvbnN0IGJhciA9IDI7XG4gIDwvZGl2PlxuICA8c2ltcGxlLWdyZWV0aW5nIG5hbWU9XCJXb3JsZFwiPjwvc2ltcGxlLWdyZWV0aW5nPlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMi4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjQuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4zLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ

image/png

passle, 1 month ago

@bramus @DavidDarnes @Jbasoo Oh lol, figured it out. i++ was in the wrong place, and the fourth color/token is whitespace

This is working nicely then! Very cool api, and nice to see that it can be integrated with shiki pretty easily. Would just have to adjust the stylesheet for the theme to accommodate, but you can probably automate that.

https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy5qcyIsImNvbnRlbnQiOiJpbXBvcnQgeyBjb2RlVG9Ub2tlbnMgfSBmcm9tICdzaGlraS9idW5kbGUvd2ViJztcblxuY29uc3QgeyB0b2tlbnMgfSA9IGF3YWl0IGNvZGVUb1Rva2Vucyhjb2RlLnRleHRDb250ZW50LCB7IFxuICB0aGVtZTogJ25vcmQnLCBcbiAgbGFuZzogJ2pzJ1xufSk7XG5cbmNvbnN0IGNvbG9yR3JvdXBzID0gdG9rZW5zLmZsYXQoKS5yZWR1Y2UoKGFjYywgY3VycikgPT4ge1xuICBjb25zdCByYW5nZSA9IG5ldyBSYW5nZSgpO1xuICByYW5nZS5zZXRTdGFydChjb2RlLmZpcnN0Q2hpbGQsIGN1cnIub2Zmc2V0KTtcbiAgcmFuZ2Uuc2V0RW5kKGNvZGUuZmlyc3RDaGlsZCwgY3Vyci5vZmZzZXQgKyBjdXJyLmNvbnRlbnQubGVuZ3RoKTtcbiAgY3Vyci5yYW5nZSA9IHJhbmdlO1xuICBhY2NbY3Vyci5jb2xvcl0gPSBbLi4uKGFjY1tjdXJyLmNvbG9yXSB8fCBbXSksIGN1cnJdO1xuICByZXR1cm4gYWNjO1xufSwge30pO1xuXG5jb25zb2xlLmxvZyhPYmplY3Qua2V5cyhjb2xvckdyb3VwcykubGVuZ3RoKTsgLy8gNFxuLy8gSSB3b3VsZCBoYXZlIGV4cGVjdGVkIDQgY29sb3JzIHRvIGhhdmUgYmVlbiBvdXRwdXQgaW4gdGhlIGBSZXN1bHRgP1xuXG5sZXQgaSA9IDA7XG5jb25zdCBuYW1lcyA9IFsnYScsICdiJywgJ2MnLCAnZCddO1xuZm9yIChjb25zdCBbY29sb3IsIGl0ZW1zXSBvZiBPYmplY3QuZW50cmllcyhjb2xvckdyb3VwcykpIHtcbiAgaSsrO1xuICBDU1MuaGlnaGxpZ2h0cy5zZXQobmFtZXNbaV0sIG5ldyBIaWdobGlnaHQoKSk7XG4gIGZvciAoY29uc3QgeyByYW5nZSB9IG9mIGl0ZW1zKSB7XG4gICAgQ1NTLmhpZ2hsaWdodHMuZ2V0KG5hbWVzW2ldKS5hZGQocmFuZ2UpO1xuICB9XG59In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxoZWFkPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3NpbXBsZS1ncmVldGluZy5qc1wiPjwvc2NyaXB0PlxuICA8c3R5bGU-XG4gICAgOjpoaWdobGlnaHQoYSkge1xuICAgICAgY29sb3I6IHJlZDtcbiAgICB9XG4gICAgXG4gICAgOjpoaWdobGlnaHQoYikge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgfVxuICAgIFxuICAgIDo6aGlnaGxpZ2h0KGMpIHtcbiAgICAgIGNvbG9yOiBncmVlbjtcbiAgICB9XG4gICAgXG4gICAgOjpoaWdobGlnaHQoZCkge1xuICAgICAgY29sb3I6IHB1cnBsZTtcbiAgICB9XG4gIDwvc3R5bGU-XG48L2hlYWQ-XG48Ym9keT5cbiAgPGRpdiBpZD1cImNvZGVcIj5cbiAgICBjb25zdCBmb28gPSAxO1xuICAgIGNvbnN0IGJhciA9IDI7XG4gIDwvZGl2PlxuICA8c2ltcGxlLWdyZWV0aW5nIG5hbWU9XCJXb3JsZFwiPjwvc2ltcGxlLWdyZWV0aW5nPlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMi4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjQuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4zLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ

passle, 1 month ago

@scrwd havent looked at those things yet - make it work, then make it pretty

passle, 2 months ago

@steveworkman That confirms my thinking as well. Alternatively, you could have the service worker check in with the client (send a ping/pong) to check whether or not it should stay alive. Then if you want to get rid of the service worker, you just remove the pong sent from the client, and if no pong was received by the SW, unregister itself

passle, 2 months ago

@steveworkman > which in reality, no one ever thinks about

Isn't that what we're doing here right now 😛

passle, 2 months ago

@erikKroes the only real way you know if something is working or not

passle, 3 months ago

@tanepiper can you show an example of what you mean? You mean turning the graph into something thats query-able with graphql?

passle, 3 months ago

passle, 4 months ago

@jaffathecake @tbroyer @jpzwarte That sounds like it might be fine? Polyfills generally do some hacky stuff, but if it means that today you can use a polyfill based on the history API, and in the (hopefully near) future you can drop that polyfill while keeping the behavior the same by using the native navigation api, that should be OK for SPA's, right?

passle, 4 months ago

@erikKroes the lord knows I try but damn does that place make it hard

passle, 4 months ago

@zachleat Sorry for tagging, but I feel like you're the kind of person who would know how that works/if thats possible

passle, 4 months ago

@zachleat cool, thank you!