regex101: JavaScript Match Workspace

Regular Expression

(["'`])(?:(?!\1)(?:.|\n))*?(?<marker>--socio(?:-\w+?)*)(?:[;\s]+)?\1

New

<script lang="ts">
    //imports
    import { SocioClient, type ClientMessageDataObj } from "socio/core-client";
    import {sleep} from 'socio/utils'
    // import { ChatRoomClient, type ChatRoomMessage, HandleChatRoomCMD } from 'socio/chat';
    import { log } from "socio/logging";
    import type {Bit, id} from 'socio/types'

    import { onMount, onDestroy } from "svelte";
    import { slide } from "svelte/transition";
    import toast from 'svelte-french-toast';

    //comps
    import Bloom from "$lib/bloom.svelte";
    import Spinner from "$lib/spinner.svelte";
    import Button from "$lib/button.svelte";

    //variables
    let ready = false, current_msg = '';

    //init SocioClient
    const sc = new SocioClient("ws://localhost:3000", {
        verbose: true,
        name: "Main",
        // persistent:true
    });
    // const chat = new ChatRoomClient(sc.Serv.bind(sc), (msgs:ChatRoomMessage[]) => {
    //     chat_messages.push(...msgs);
    //     chat_messages = chat_messages;
    // });

    //setup toasts
    sc.lifecycle_hooks.msg = (name:string, client_id:string, kind:string, data:any) => {
        if(['UPD', 'PROP_UPD'].includes(kind))
            toast('An update came in from the Socio Server.', {style:'background: #0D0D0E; color: #fff;',position: "bottom-center", duration:1000});
        else if(kind == 'ERR')
            toast.error(`An error arrived for a query or prop. MSG ID:${data.id}`,{position: "bottom-center", duration:1000})
    }

    onMount(async () => {
        ready = await sc.ready();
        toast.success('Socio Client connected!', {icon:'🥳',position: "bottom-center", duration:1000});
        // sc.lifecycle_hooks.cmd = (data:ClientMessageDataObj) => {HandleChatRoomCMD(data, chat)}

        // chat.Join(1);

        const id_1 = sc.Subscribe({sql: "
SELECT 
COUNT(*) AS RES FROM users WHERE name = :name;
--socio-auth-perm
",params: { name: "John" }}, log);
        const id_2 = sc.Subscribe({ sql: "SELECT * FROM users;--socio" },log);
        sc.SubscribeProp("color", log);
    });

    //cleanup for dev server reloads.
    onDestroy(() => {
        // chat.Leave();
        sc.UnsubscribeAll({props:true, queries:true}); //NB! this wipes the subscriptions on the SocioClient instance, not just the ones registered here. Subscriptions return id's to use for unsubscribing.
    });

    // async function UploadFiles(e:any){
    //     log(await sc.SendFiles(e.target.files));
    // }
    // async function DownloadFiles(){
    //     log(await sc.GetFiles(['./files/baffy.txt']));
    // }

    // function Send(e:any){
    //     if (e.keyCode == 13){
    //         chat.Post(current_msg);
    //         current_msg = '';
    //     }
    // }
</script>

<section>
    {#if ready}
        <div class="horiz">
            <h4>
                <a href="https://kit.svelte.dev/"
                    target="_blank"
                    class="thin light">
                    SvelteKit
                </a>
                +
                <a href="https://vitejs.dev/"
                    target="_blank"
                    class="thin light">
                    Vite
                </a>
                demo.
            </h4>
            <h6 class="darker_text">client ID: {sc.client_id}</h6>
        </div>

        <!-- <div class="horiz">
            <h6 class="darker_text bold">single sql query:</h6>
            <h4>SELECT 42+69 AS RESULT; =</h4>
            {#await sc.Query("SELECT 42+69 AS RESULT;--socio")}
                <Bloom><Spinner style="--h:24px;--t:6px;" /></Bloom>
            {:then res}
                <h4 class="bold">{res[0].RESULT}</h4>
            {/await}
        </div> -->

        <div class="line" />

        <!-- <input type="text" bind:value={current_msg} placeholder="type message..." on:keydown={Send}> -->

        <!-- <div class="line" /> -->

        <!-- <p style="text-align: left;">
            {#each chat_messages as msg}
                {msg.text}<br>
            {/each}
        </p> -->

        <!-- <input type="file" accept=".txt" on:change={UploadFiles}>

        <div class="line" />

        <Bloom style="--s_h:0.8;--b_h:8px;--c_h:1;">
            <Button
                style="width:100%;"
                on:click={DownloadFiles}
            >
                Get Files
            </Button>
        </Bloom> -->

        <Bloom style="--s_h:0.8;--b_h:8px;--c_h:1;">
            <Button
                style="width:100%;"
                on:click={() => sc.Query('INSERT INTO users (name, num) VALUES(:name, :num);--socio', {name:'John', num:420})}
            >
                Insert John
            </Button>
        </Bloom>

        <Bloom style="--s_h:0.8;--b_h:8px;--c_h:1;">
            <Button
                style="width:100%;"
                on:click={() => sc.SetProp("color", '#451299')}
            >
                Set prop
            </Button>
        </Bloom>
    {:else}
        <Bloom style="--b:4px;"><Spinner style="--h:64px;--t:10px;" /></Bloom>
    {/if}
</section>

<style lang="scss">
    section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: $pad;
    }

    .insert {
        width: 600px;
        display: flex;
        flex-direction: column;
        gap: $pad;
    }

    .inputs {
        width: 100%;
        display: flex;
        gap: $pad;
    }

    input {
        width: calc(100% - (#{$pad_small} * 2));
        min-width: 0px;
        padding: $pad_small;

        font-size: 24px;
        font-weight: 200;
        background: transparent;
        color: $acc1;
        border: 1px solid $acc1;
        outline: none;
    }

    .users {
        max-width: 600px;
        width: 600px;
        display: flex;
        flex-direction: column;
        gap: $pad_small;

        overflow-y: auto;
        max-height: 300px;
        padding: $pad;

        .user {
            width: 100%;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
    }

    .color {
        display: flex;
        align-items: center;
        gap: $pad;

        .color_box {
            min-width: 100px;
            height: 49px;
            padding: $gap;
            background-color: var(--c);
            display: flex;
            align-items: center;
            justify-content: center;

            transition: $trans;

            h4 {
                color: white;
                mix-blend-mode: difference;
            }
        }
    }

    .line {
        min-height: 1px;
        height: 1px;
        width: 500px;
        background-color: $gray3;
    }
</style>

Regular Expressions 101

Regular Expression

Extraction