JavaScript API

Getting Started

Include the script

<script src="https://tref.lpmwfx.com/js/tref.min.js"></script>

Or install from npm:

npm install tref-block

Core Functions

Create and display a block

          // Publish content
const block = await TREF.publish("My knowledge", {
  author: "Jane",
  refs: [{ type: "url", url: "https://source.com", title: "Source" }]
});

// Display with wrapper
const wrapper = new TREF.TrefWrapper(block);
document.body.innerHTML = wrapper.toHTML();
wrapper.attachEvents(document.querySelector('.tref-wrapper'));
        

Derive from existing

Create a child block that links back to its parent, preserving lineage.

const child = await TREF.derive(parentBlock, "New content based on parent");

Validate integrity

Verify that a block's ID matches its content hash (tamper detection).

          const isValid = await TREF.validate(block);
console.log(isValid ? "Block is authentic" : "Block has been tampered with");
        

Components

TrefWrapper

Display component with drag, copy, and download actions.

          const wrapper = new TREF.TrefWrapper(block, {
  showDropdown: true,   // Show action menu on hover
  draggable: true       // Enable drag-and-drop
});

// Render to DOM
element.innerHTML = wrapper.toHTML();
wrapper.attachEvents(element.querySelector('.tref-wrapper'));
        

TrefReceiver

Drop zone for receiving TREF blocks.

          const receiver = new TREF.TrefReceiver(dropZoneElement, {
  onReceive: (wrapper) => {
    console.log("Received block:", wrapper.block);
    // Do something with the received block
  }
});
        