isRaw

Check whether an object has been marked to skip deep conversion.

isRawUtilities

Check whether an object has been marked to skip deep conversion.

Overview

The isRaw function determines whether a given value has been marked as "raw" using the markRaw function, indicating that it should not be deeply converted into a deep ref when using the ref function.

Try it live

A deliberate conversion boundaryLive API

Live preview

Reactive field

The marked resource keeps its identity and its plain fields during deep conversion.

CONVERSION BOUNDARY

isRaw(resource): true
Same resource object: true
isRef(resource.label): false
Reactive title: Reactive title

raw-state.ts

import { computed, html, isRaw, isRef, markRaw, ref } from 'regor'

export function createRawState(interactive = false) {
  const resource = markRaw({ label: 'External resource' })
  const state = ref({ resource, title: 'Reactive title' })
  return {
    interactive,
    state,
    rawCheck: isRaw(resource),
    sameObject: state().resource === resource,
    nestedIsRef: isRef(resource.label),
    snapshot: computed(() => state().title()),
  }
}

export const rawStateTemplate = html` <div class="guide-demo guide-demo--split">
  <div class="guide-controls">
    <label for="raw-title">Reactive field</label
    ><input
      id="raw-title"
      type="text"
      maxlength="50"
      r-model="state.title"
      :value="snapshot"
      :disabled="!interactive"
    />
    <p class="guide-hint">
      The marked resource keeps its identity and its plain fields during deep
      conversion.
    </p>
  </div>
  <div class="guide-readout">
    <span class="guide-kicker">CONVERSION BOUNDARY</span>
    <dl class="directive-values">
      <div>
        <dt>isRaw(resource)</dt>
        <dd>{{ rawCheck }}</dd>
      </div>
      <div>
        <dt>Same resource object</dt>
        <dd>{{ sameObject }}</dd>
      </div>
      <div>
        <dt>isRef(resource.label)</dt>
        <dd>{{ nestedIsRef }}</dd>
      </div>
      <div>
        <dt>Reactive title</dt>
        <dd>{{ snapshot }}</dd>
      </div>
    </dl>
  </div>
</div>`

browser.ts

import { createApp, RegorConfig, useScope } from 'regor'
import { apiExamples } from './examples'

const element = document.getElementById('api-demo')
const name = element?.dataset.example
if (element && name && Object.hasOwn(apiExamples, name)) {
  const example = apiExamples[name as keyof typeof apiExamples]
  const scope = useScope<object>(() => example.create(true))
  const config =
    'config' in scope.context && scope.context.config instanceof RegorConfig
      ? scope.context.config
      : undefined
  createApp(scope, { element, template: example.template }, config)
}

Edit the reactive title. The marked resource keeps its object identity and plain nested field.

Usage

Checking for Raw Value

To check if a value is marked as raw, you can use the isRaw function.

import { isRaw } from 'regor'

const myValue = /* Your value here */

if (isRaw(myValue)) {
  console.log('The value is marked as raw.')
} else {
  console.log('The value is not marked as raw.')
}

Parameters

value: The value you want to check for being marked as raw.

Return Value

The isRaw function returns true if the provided value is marked as raw using markRaw, and false otherwise.

Implementation Details

The function checks if the provided value has a property marked with the rawSymbol set to 1, indicating that it is marked as raw.

Example

import { markRaw, isRaw } from 'regor'

const data = {
  name: 'Alice',
  age: 30,
  rawProperty: markRaw({ nested: 'value' }),
}

// Check if rawProperty is marked as raw
if (isRaw(data.rawProperty)) {
  console.log('The rawProperty is marked as raw.')
} else {
  console.log('The rawProperty is not marked as raw.')
}

Raw and ref describe different things

isRaw checks the conversion boundary marker. isRef checks whether the value is a reactive ref.