core.js Documentation

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>

<script src="/path/to/core.js"></script>

npm install -g @core.sbs/create-core-app

create-core-app my-app
cd my-app

core-dev

<section id="cr-data" style="display:none;">
    <template name="users">
        <div class="core-clone" data-core-data="users">
            <h3>{{rec:name}}</h3>
            <p>{{rec:email}}</p>
            <p>Balance: {{rec:balance:money:$}}</p>
        </div>
    </template>
</section>

<div class="core-pocket" 
     data-core-templates="users" 
     data-users-core-source="https://api.example.com/users">
</div>

core.init();

<div class="core-pocket" data-core-templates="myTemplate"></div>

<div class="core-pocket" 
     data-core-templates="products" 
     data-products-core-source="/api/products">
</div>

<div class="core-pocket" 
     data-core-templates="header,content,footer">
</div>

{{type:source:reference:format:clue}}

<template name="userCard">
    <div class="core-clone" data-core-data="users">
        <h3>{{rec:name}}</h3>
        <p>{{rec:address.city}}</p>
        <p>{{rec:email:lower}}</p>
        <p>{{rec:balance:money:$}}</p>
        <span>Item {{aug:count}}</span>
        <img {{rec:avatar:core_pk_attr:src}} alt="Avatar">
    </div>
</template>

<div class="core-clone" data-core-data="products">
    <h3>{{rec:name}}</h3>
    <p>{{rec:price:money:$}}</p>
</div>

{{rec:user.profile.name}}
{{rec:address.billing.street}}
{{rec:settings.theme.colors.0}}
{{rec:tags.[n]}}

core.init();

await core.be.getData('users', '/api/users');

await core.be.getData('users', '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    data: { filter: 'active' }
});

await core.be.getTemplate('header', '/templates/header.html');

core.be.getData('users', '/api/users');
core.be.getData('products', '/api/products');
await core.be.awaitAll();

core.cr.setData('users', usersArray);
core.cr.setData('token', 'abc123', null, 2);

const users = core.cr.getData('users');
const token = core.cr.getData('token', null, 2);

core.cr.setTemplate('myTemplate', '<div>{{rec:name}}</div>');
const template = core.cr.getTemplate('myTemplate');

await core.pk.soc();

const records = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
];
const template = '<div>{{rec:name}} is {{rec:age}}</div>';
const html = core.pk.cloner(records, template);

core.hf.date();
core.hf.date(null, 'YYYY-MM-DD');
core.hf.date(1738627200, 'M/D/YY H:MM P');

const user = {
    name: 'John',
    address: { billing: { street: '123 Main' } },
    tags: ['admin', 'user']
};

core.hf.digData(user, 'name');
core.hf.digData(user, 'address.billing.street');
core.hf.digData(user, 'tags.0');
core.hf.digData(user, 'tags.[n]');

const users = [
    { name: 'Charlie', age: 30 },
    { name: 'Alice', age: 25 }
];
core.hf.sortObj(users, 'name');
core.hf.sortObj(users, 'age', 'numeric', 'DESC');

const id = core.hf.uuid();
const prefixed = core.hf.uuid('user-');

// Access schema properties
{{data:coreInternalObjects:product:name}}
{{data:coreInternalObjects:order:total}}
{{data:coreInternalObjects:contact:email}}

<!-- Direct template binding -->
<span>{{data:coreInternalHit:version}}</span>
<span>{{data:coreInternalHit:YYYY}}</span>

<!-- CSS class hydration -->
<span class="h--coreInternalHit-version"></span>
<span class="h--coreInternalHit-YYYY"></span>

<!-- Footer example -->
&copy; <span class="h--coreInternalHit-YYYY"></span> CORE_ORCHESTRATOR // version <span class="h--coreInternalHit-version"></span>

<span class="h-users-name"></span>
<span class="h-users-email"></span>

<script>
core.hf.hydrateByClass();
</script>

<span class="f-money" data-f-clue="$">1234.56</span>
<span class="f-upper">hello</span>

const result = core.sv.scrub([
    { name: 'email', value: 'user@example.com', scrubs: ['req', 'email'] },
    { name: 'password', value: 'secret123', scrubs: ['req', 'min:8'] }
]);

if (result.success) {
    console.log('Valid!', result.scrubs);
} else {
    console.log('Errors:', result.errors);
}

core.ux.insertPocket('#main', 'home');

core.ux.insertPocket('#main', 'products', [
    { name: 'products', url: '/api/products' }
]);

core.ux.insertPocket('#main', 'header,content,footer');

core.ux.formatValue('hello', 'upper');
core.ux.formatValue('  hello  ', 'trim|upper');
core.ux.formatValue(1234.56, ['money*$']);

core.ud.defaultDelta = 'N/A';
core.ud.defaultDateFormat = 'YYYY-MM-DD';
core.ud.defaultLoadingTemplate = '<div class="spinner"></div>';

core.ud.init = () => {
    core.useRouting = true;
    console.log('Framework initialized');
};

core.ud.soc = () => {
    console.log('Rendering started');
};

core.ud.preflight = (dataRef, dataSrc, type) => {
    return {
        headers: { 'Authorization': 'Bearer ' + token }
    };
};

core.ud.postflight = (dataRef, dataObj, type) => {
    if (dataRef === 'users') {
        dataObj = dataObj.filter(u => u.active);
    }
    return dataObj;
};

core.ud.postpaint = (dataRef, dataObj, type) => {
    console.log(`Rendered ${dataRef}`);
};

// DOM storage (memory only)
core.cr.setData('tempState', { count: 0 }, element, 0);

// Static storage (default, visible in HTML)
core.cr.setData('users', usersArray, null, 1);

// Session storage (persists across page loads)
core.cr.setData('authToken', 'abc123', null, 2);

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>
</head>
<body>
    <div id="main">
        <div class="core-pocket" data-core-templates="users"></div>
    </div>

    <section id="cr-data" style="display:none;">
        <template name="users">
            <div class="core-clone" data-core-data="users">
                <h3>{{rec:name}}</h3>
                <p>{{rec:email}}</p>
            </div>
        </template>
    </section>

    <script>
        core.ud.init = () => {
            const users = [
                { name: 'John Doe', email: 'john@example.com' },
                { name: 'Jane Smith', email: 'jane@example.com' }
            ];
            core.cr.setData('users', users);
        };
    </script>
</body>
</html>

<form id="signupForm">
    <input type="text" name="username" placeholder="Username">
    <input type="email" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <input type="password" name="confirmPassword" placeholder="Confirm">
    <button type="submit">Sign Up</button>
</form>

<script>
document.getElementById('signupForm').addEventListener('submit', (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const result = core.sv.scrub([
        {
            name: 'username',
            value: formData.get('username'),
            scrubs: ['req', 'alphanum', 'min:3', 'max:20']
        },
        {
            name: 'email',
            value: formData.get('email'),
            scrubs: ['req', 'email']
        },
        {
            name: 'password',
            value: formData.get('password'),
            scrubs: ['req', 'min:8']
        },
        {
            name: 'confirmPassword',
            value: formData.get('confirmPassword'),
            scrubs: ['req', 'match:password']
        }
    ]);
    
    if (result.success) {
        console.log('Form valid!', result.scrubs);
        // Submit to server
    } else {
        console.log('Validation errors:', result.errors);
        // Show errors to user
    }
});
</script>

<div class="core-pocket" 
     data-core-templates="products" 
     data-products-core-source="https://api.example.com/products">
</div>

<template name="products">
    <div class="core-clone" data-core-data="products">
        <img {{rec:image:core_pk_attr:src}} alt="{{rec:name}}">
        <h3>{{rec:name}}</h3>
        <p>{{rec:description:truncate:100}}</p>
        <p class="price">{{rec:price:money:$}}</p>
        <button onclick="addToCart('{{rec:id}}')">Add to Cart</button>
    </div>
</template>

<nav>
    <a href="#/_main/home">Home</a>
    <a href="#/_main/about">About</a>
    <a href="#/_main/products">Products</a>
    <a href="#/_main/contact">Contact</a>
</nav>

<div id="main">
    <div class="core-pocket" data-core-templates="home"></div>
</div>

<section id="cr-data" style="display:none;">
    <template name="home">
        <h1>Welcome Home</h1>
    </template>
    
    <template name="about">
        <h1>About Us</h1>
    </template>
    
    <template name="products">
        <h1>Our Products</h1>
        <div class="core-clone" data-core-data="products">
            <div>{{rec:name}} - {{rec:price:money:$}}</div>
        </div>
    </template>
    
    <template name="contact">
        <h1>Contact Us</h1>
    </template>
</section>

<script>
core.ud.init = () => {
    core.useRouting = true;
};
</script>

<div class="core-pocket" data-core-templates="users"></div>

<template name="users">
    <div class="core-clone" data-core-data="users">
        <h3>{{rec:name}}</h3>
        <p>{{rec:email}}</p>
        
        <!-- Recursive: render posts for each user -->
        <div class="posts">
            {{rec:posts:core_pk_cloner:postTemplate}}
        </div>
    </div>
</template>

<template name="postTemplate">
    <div class="post">
        <h4>{{rec:title}}</h4>
        <p>{{rec:content:truncate:200}}</p>
        <span>{{rec:date:date:M/D/YY}}</span>
        
        <!-- Nested recursive: render comments for each post -->
        <div class="comments">
            {{rec:comments:core_pk_cloner:commentTemplate}}
        </div>
    </div>
</template>

<template name="commentTemplate">
    <div class="comment">
        <strong>{{rec:author}}</strong>: {{rec:text}}
    </div>
</template>

<script>
core.ud.init = () => {
    const users = [
        {
            name: 'John Doe',
            email: 'john@example.com',
            posts: [
                {
                    title: 'First Post',
                    content: 'This is my first post...',
                    date: 1738627200,
                    comments: [
                        { author: 'Jane', text: 'Great post!' },
                        { author: 'Bob', text: 'Thanks for sharing!' }
                    ]
                }
            ]
        }
    ];
    core.cr.setData('users', users);
};
</script>