<commit_before><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">
  <meta name="keywords" content="javascript, framework, performance, small, fast, UI, programming, code, component, composi, chocolatechipui, chocolatechip-ui, reactive, virtual dom">
  <title>Composi - Docs</title>
  <link rel="stylesheet" href="../css/styles.css">
  <link rel="stylesheet" href="../css/styles.css">
  <link rel="stylesheet" href="../css/prism-tomorrow.css">
</head>
<body class='documentation-page'>
  <nav>
    <ul class='nav--menu'>
      <li class='nav--menu__item'>
        <a class='nav--menu__item__link' href="../index.html">
          <svg id='composi-logo' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Composi Logo</title>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Composi-Logo-Solid" fill="#fff">
                <path d="M1.77635684e-15,0 L95,0 L95,38 L209,38 L209,0 L300,0 L300,94 L265,93.8571663 L265,209 L300,209 L300,300 L209,300 L209,265 L95,265 L95,300 L1.77635684e-15,300 L1.77635684e-15,209 L40,209 L40,94 L1.77635684e-15,93.8571663 L1.77635684e-15,0 Z M107,107 L107,192 L192,192 L192,107 L107,107 Z" id="Combined-Shape"></path>
              </g>
            </g>
          </svg>
        <span class='logo__link--text'>Composi</span></a>
      </li>
      <li class='nav--menu__item selected'>
        <a class='nav--menu__item__link' href="./installation.html">Docs</a>
      </li>
      <li class='nav--menu__item'>
        <a class='nav--menu__item__link' href="../tuts/index.html">Tutorials</a>
      </li>
    </ul>
  </nav>
  <article class='docs__article'>
    <section>
      <div class='docs'>
          <h1>State</h1>
          <p class="docs__intro">Components can be stateless or stateful. There are advantages to both. Chose the right one depending on use case. For example, if a component will only display the result of some other action, make it stateless and pass it the data it needs. If the data of a component can change at unpredictable times, make it stateful. That way, when its data changes, it will update automatically. If you have a fixed dataset and the component will never need to be rendered again during the session, make it stateless and pass it the data.</p>

          <p>When you give a component state, Composi assigns the state getters and setters. Setting state causes the component to render a new virtual dom, diff it with the old virtual dom, and if there are differences, update the actual DOM. As such, the assignment of data to a component's state will trigger an update. Setting state directly is ideal for primitive data types, such as string, numbers:</p>

          <p data-height="300" data-theme-id="6688" data-slug-hash="VrYLLv" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-1" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/VrYLLv/">Composi state-1</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
          <p>Or we can add state when extending the Component class:</p>

          <p data-height="300" data-theme-id="6688" data-slug-hash="MOYwwq" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-2" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/MOYwwq/">Composi state-2</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
          <p>Or you could add state when you initialize a new component:</p>
          <p data-height="300" data-theme-id="6688" data-slug-hash="mqyJeO" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-3" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/mqyJeO/">Composi state-3</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
          <p> </p>

          <h2>How State Gets Passed</h2>
          <p>When you give a component state, at render time the value of state gets passed to the <code>render</code> function as its data. No need to directly reference state inside the <code>render</code> function. So, in the above example, the value of the <code>render</code> parameter <code>message</code> will be the value of the component's state property.</p>

          <h2>Strings and Numbers as State</h2>
          <p>In our previous example we used as string as the component's state. You could also use a number. In that case you could perform Math operations with the value of the state and then reassign it back to the state to update the component.</p>
          
          <h2>Booleans</h2>
          <p>By default boolean values are not output. This is so they can be used for conditional checks. However, if you want to output a boolean value, just convert it to a string. There are two ways to do this. For <code>true</code> or <code>false</code> you can add <code>toString()</code> to convert them to strings. The values <code>null</code> and <code>undefined</code> do not have a <code>toString()</code> function, but you can use string concatenation to convert them, or use <code>String(value)</code>. Below are examples of these approaches. Note, we are just showing the render function, not the complete component code:</p>

          <pre>
            <code class="language-javascript">
// For true or false:
render: (value) => &lt;p>The boolean value is: {value.toString()}&lt;/p>

// The above approach would throw an error if the boolean was undefined or null.
// For them, do the following:
render: (value) => &lt;p>The boolean value is: {value + ''}&lt;/p>

// Make boolean uppercase:
render: (value) => &lt;p>The boolean value is: {(String(value).toUpperCase()}&lt;/p></code>
          </pre>

              <p> </p>
              <h2>setState</h2>
              <p>Most components will have state of complex data types: objects or arrays. To update the state of complex types you have two choices: use the <code>setState</code> method or get the state, perform your operations and set the state with the final result. We'll look at <code>setState</code> first.</p>

              <h2>Setting State for Primitive Types</h2>
              <p>When the type is primitive, a string, number or boolean, you can set the state directly, or use the <code>setState</code> method:</p>
              <pre>
                <code class="language-javascript">
helloWorld.state = 'everybody'

// or:
helloWorld.setState('everybody')</code>
              </pre>

              <p> </p>
              <h2>Setting State for Complex Types - setState</h2>
              <p>The purpose of <code>setState</code> is to enable making a patch to state that is an object or array. Because state is controlled by its getters and setters, you cannot directly manipulate the data it contains. With component state you can either get it, or set it. Period.</p>
              <p>First lets look at a component that prints out a person object:</p>
              
              <p data-height="400" data-theme-id="6688" data-slug-hash="qVEdNE" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-4" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/qVEdNE/">Composi state-4</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
              <p>Now imagine you want to update the the person's job. You might think you could access the job directingly on the state object, but you can't. That would be an assignment, and because state has a setter, you can only assign to the state itself:</p>
              <pre>
                <code class="language-javascript">
// This assignment will not work:
personComponent.state.job = 'Web Developer'</code>
              </pre>
              <p>Instead of trying to assign a property of the state object, we need to use the <code>setState</code> method. To update a state object property, we pass in an object with that property and the new value. Behind the scenes, <code>setState</code> will mixin the new object with the state object. Then it will create a new virtual dom and patch the actual DOM to reflect those changes:</p>
              <pre>
                <code class="language-javascript">
// Update the job property of the component's state:
personComponent.setState({job: 'Web Developer'})</code>
              </pre>

              <p> </p>
              <h2>Updating Array State</h2>
              <p>When a component has an array as state, you need to provide a second argument for <code>setState</code>: the index of the array where you want to make the index. For instance, suppose we have a component <code>fruitList</code> that prints out a list of fruits. We notice that the third item in the list is mispelled and want to update it. We can do that as follows:</p>
              <pre>
                <code class="language-javascript">
fruitList.state = ['Apples', 'Oranges', 'Pinpalpes', 'Bananas']

// Use second argument for index in the array you want to update:
fruitList.setState('Pinapples', 2)</code>
</pre>
                <p> </p>
                <h2>Updating state for Array of Objects</h2>
                <p>Suppose a component's state is an array of objects:</p>
                <pre>
                  <code class="language-javascript">
const people = [
  {
    firstName: 'Joe',
    lastName: 'Bodoni',
    job: 'Mechanic'
  },
  {
    firstName: 'Ellen',
    lastName: 'Vanderbilt',
    job: 'Lab Technician'
  },
  {
    firstName: 'Sam',
    lastName: 'Anderson',
    job: 'Web Developer'
  }
]</code>
</pre>
            <p>This array is used as the state for a component of users. We want to update Joe's job to Rock Star. You might try to do this:</p>
            <pre>
              <code class="language-javascript">
// Update job for Joe Bodoni:
userList.setState({job: 'Rock Star'}, 0)</code>
            </pre>
            <p>Doing the above will actually replace whatever is currently at index 0 with the new object with just the job property. That's because when you use <code>setState</code> on an array with an index value, Composi uses that information to splice the array. As such it is not possible to update an array of objects with <code>setState</code>. To do so you will need to get the state, perform whatever transform you need and then re-assign the state with the new array:</p>
            <pre>
              <code class="language-javascript">
// Proper way to update an object in an array.
// Get the Joe Bodoni user from state:
const state = userList.state[0]

// Set job to new value:
state.job = 'Rock Star'

// Update component's state:
userList.state = state</code>
</pre>
              <p> </p>
              <h2>Complex State Operations</h2>
              <p>As we saw in our last example of arrays, sometimes you will need to get the state, operate on it separately and then set the component's state to that. For example, if you need to use map, filter, sort or reverse on an array, you'll want to get the complete state and perform these operations. Aftwards you can just set the state:</p>
              <pre>
                <code class="language-javascript">
// Get the component's state:
const state = fruitsList.state

// Reverse the array:
state.reverse()

// Set the component's state with the new state:
fruitsList.state = state</code>
              </pre>
              <p> </p>
              <h2>setState with a Callback</h2>
              <p>One option for handling the need for complex operations when setting state is to pass a callback to the <code>setState</code> method. When you do so, the first argument of the callback will be the component's state. In the example below, notice how we get the state and manipulate it in the <code>handleClick</code> method. After doing what you need to with state, remember to return it. Otherwise the component's state will not get updated.</p>
              <p>Notice how we use a callback in the <code>setState</code> method inside the <code>handleClick method to test what the current value of state is:</code></p>

              <p>Codepen Example:</p>
              <p data-height="550" data-theme-id="6688" data-slug-hash="XzJbjQ" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-5" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/XzJbjQ/">Composi state-5</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
              <p>Be aware that whatever the callback returns will be set as the component's new state. Therefore you will need to make whatever changes to the component's whole state before returning it.</p>
          <p>&nbsp;</p>
      </div>

      <aside>
        <menu>
          <ul class="docs__menu">
            <li class="docs__menu__item">
              <a href='./installation.html'>Installation</a>
            </li>
            <li class="docs__menu__item">
              <a href='./render.html'>Render</a>
            </li>
            <li class="docs__menu__item"><commit_msg>Update about setState<commit_after><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">
  <meta name="keywords" content="javascript, framework, performance, small, fast, UI, programming, code, component, composi, chocolatechipui, chocolatechip-ui, reactive, virtual dom">
  <title>Composi - Docs</title>
  <link rel="stylesheet" href="../css/styles.css">
  <link rel="stylesheet" href="../css/styles.css">
  <link rel="stylesheet" href="../css/prism-tomorrow.css">
</head>
<body class='documentation-page'>
  <nav>
    <ul class='nav--menu'>
      <li class='nav--menu__item'>
        <a class='nav--menu__item__link' href="../index.html">
          <svg id='composi-logo' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Composi Logo</title>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Composi-Logo-Solid" fill="#fff">
                <path d="M1.77635684e-15,0 L95,0 L95,38 L209,38 L209,0 L300,0 L300,94 L265,93.8571663 L265,209 L300,209 L300,300 L209,300 L209,265 L95,265 L95,300 L1.77635684e-15,300 L1.77635684e-15,209 L40,209 L40,94 L1.77635684e-15,93.8571663 L1.77635684e-15,0 Z M107,107 L107,192 L192,192 L192,107 L107,107 Z" id="Combined-Shape"></path>
              </g>
            </g>
          </svg>
        <span class='logo__link--text'>Composi</span></a>
      </li>
      <li class='nav--menu__item selected'>
        <a class='nav--menu__item__link' href="./installation.html">Docs</a>
      </li>
      <li class='nav--menu__item'>
        <a class='nav--menu__item__link' href="../tuts/index.html">Tutorials</a>
      </li>
    </ul>
  </nav>
  <article class='docs__article'>
    <section>
      <div class='docs'>
          <h1>State</h1>
          <p class="docs__intro">Components can be stateless or stateful. There are advantages to both. Chose the right one depending on use case. For example, if a component will only display the result of some other action, make it stateless and pass it the data it needs. If the data of a component can change at unpredictable times, make it stateful. That way, when its data changes, it will update automatically. If you have a fixed dataset and the component will never need to be rendered again during the session, make it stateless and pass it the data.</p>

          <p>When you give a component state, Composi assigns the state getters and setters. Setting state causes the component to render a new virtual dom, diff it with the old virtual dom, and if there are differences, update the actual DOM. As such, the assignment of data to a component's state will trigger an update. Setting state directly is ideal for primitive data types, such as string, numbers:</p>

          <p data-height="300" data-theme-id="6688" data-slug-hash="VrYLLv" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-1" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/VrYLLv/">Composi state-1</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
          <p>Or we can add state when extending the Component class:</p>

          <p data-height="300" data-theme-id="6688" data-slug-hash="MOYwwq" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-2" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/MOYwwq/">Composi state-2</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
          <p>Or you could add state when you initialize a new component:</p>
          <p data-height="300" data-theme-id="6688" data-slug-hash="mqyJeO" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-3" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/mqyJeO/">Composi state-3</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
          <p> </p>

          <h2>How State Gets Passed</h2>
          <p>When you give a component state, at render time the value of state gets passed to the <code>render</code> function as its data. No need to directly reference state inside the <code>render</code> function. So, in the above example, the value of the <code>render</code> parameter <code>message</code> will be the value of the component's state property.</p>

          <h2>Strings and Numbers as State</h2>
          <p>In our previous example we used as string as the component's state. You could also use a number. In that case you could perform Math operations with the value of the state and then reassign it back to the state to update the component.</p>
          
          <h2>Booleans</h2>
          <p>By default boolean values are not output. This is so they can be used for conditional checks. However, if you want to output a boolean value, just convert it to a string. There are two ways to do this. For <code>true</code> or <code>false</code> you can add <code>toString()</code> to convert them to strings. The values <code>null</code> and <code>undefined</code> do not have a <code>toString()</code> function, but you can use string concatenation to convert them, or use <code>String(value)</code>. Below are examples of these approaches. Note, we are just showing the render function, not the complete component code:</p>

          <pre>
            <code class="language-javascript">
// For true or false:
render: (value) => &lt;p>The boolean value is: {value.toString()}&lt;/p>

// The above approach would throw an error if the boolean was undefined or null.
// For them, do the following:
render: (value) => &lt;p>The boolean value is: {value + ''}&lt;/p>

// Make boolean uppercase:
render: (value) => &lt;p>The boolean value is: {(String(value).toUpperCase()}&lt;/p></code>
          </pre>

              <p> </p>
              <h2>setState</h2>
              <p>Most components will have state of complex data types: objects or arrays. To update the state of complex types you have two choices: use the <code>setState</code> method or get the state, perform your operations and set the state with the final result. We'll look at <code>setState</code> first.</p>

              <h2>Setting State for Primitive Types</h2>
              <p>When the type is primitive, a string, number or boolean, you can set the state directly, or use the <code>setState</code> method:</p>
              <pre>
                <code class="language-javascript">
helloWorld.state = 'everybody'

// or:
helloWorld.setState('everybody')</code>
              </pre>

              <p> </p>
              <h2>Setting State for Complex Types - setState</h2>
              <p>The purpose of <code>setState</code> is to enable making a patch to state that is an object or array. Because state is controlled by its getters and setters, you cannot directly manipulate the data it contains. With component state you can either get it, or set it. Period.</p>
              <p>First lets look at a component that prints out a person object:</p>
              
              <p data-height="400" data-theme-id="6688" data-slug-hash="qVEdNE" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-4" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/qVEdNE/">Composi state-4</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
              <p>Now imagine you want to update the the person's job. You might think you could access the job directingly on the state object, but you can't. That would be an assignment, and because state has a setter, you can only assign to the state itself:</p>
              <pre>
                <code class="language-javascript">
// This assignment will not work:
personComponent.state.job = 'Web Developer'</code>
              </pre>
              <p>Instead of trying to assign a property of the state object, we need to use the <code>setState</code> method. To update a state object property, we pass in an object with that property and the new value. Behind the scenes, <code>setState</code> will mixin the new object with the state object. Then it will create a new virtual dom and patch the actual DOM to reflect those changes:</p>
              <pre>
                <code class="language-javascript">
// Update the job property of the component's state:
personComponent.setState({job: 'Web Developer'})</code>
              </pre>

              <p> </p>
              <h2>Updating Array State</h2>
              <p>When a component has an array as state, you need to provide a second argument for <code>setState</code>: the index of the array where you want to make the index. For instance, suppose we have a component <code>fruitList</code> that prints out a list of fruits. We notice that the third item in the list is mispelled and want to update it. We can do that as follows:</p>
              <pre>
                <code class="language-javascript">
fruitList.state = ['Apples', 'Oranges', 'Pinpalpes', 'Bananas']

// Use second argument for index in the array you want to update:
fruitList.setState('Pinapples', 2)</code>
</pre>
                <p> </p>
                <h2>Updating state for Array of Objects</h2>
                <p>Suppose a component's state is an array of objects:</p>
                <pre>
                  <code class="language-javascript">
const people = [
  {
    firstName: 'Joe',
    lastName: 'Bodoni',
    job: 'Mechanic'
  },
  {
    firstName: 'Ellen',
    lastName: 'Vanderbilt',
    job: 'Lab Technician'
  },
  {
    firstName: 'Sam',
    lastName: 'Anderson',
    job: 'Web Developer'
  }
]</code>
</pre>
            <p>This array is used as the state for a component of users. We want to update Joe's job to Rock Star. You might try to do this:</p>
            <pre>
              <code class="language-javascript">
// Update job for <NAME>:
userList.setState({job: 'Rock Star'}, 0)</code>
            </pre>
            <p>Doing the above will actually replace whatever is currently at index 0 with the new object with just the job property. That's because when you use <code>setState</code> on an array with an index value, Composi uses that information to splice the array. As such it is not possible to update an array of objects with <code>setState</code>. To do so you will need to get the state, perform whatever transform you need and then re-assign the state with the new array:</p>
            <pre>
              <code class="language-javascript">
// Proper way to update an object in an array.
// Get the Jo<NAME> user from state:
const state = userList.state[0]

// Set job to new value:
state.job = 'Rock Star'

// Update component's state:
userList.setState(state)</code>
</pre>
              <p> </p>
              <h2>Complex State Operations</h2>
              <p>As we saw in our last example of arrays, sometimes you will need to get the state, operate on it separately and then set the component's state to that. For example, if you need to use map, filter, sort or reverse on an array, you'll want to get the complete state and perform these operations. Aftwards you can just set the state:</p>
              <pre>
                <code class="language-javascript">
// Get the component's state:
const state = fruitsList.state

// Reverse the array:
state.reverse()

// Set the component's state with the new state:
fruitsList.setState(state)</code>
              </pre>
              <p> </p>
              <h2>setState with a Callback</h2>
              <p>One option for handling the need for complex operations when setting state is to pass a callback to the <code>setState</code> method. When you do so, the first argument of the callback will be the component's state. In the example below, notice how we get the state and manipulate it in the <code>handleClick</code> method. After doing what you need to with state, remember to return it. Otherwise the component's state will not get updated.</p>
              <p>Notice how we use a callback in the <code>setState</code> method inside the <code>handleClick method to test what the current value of state is:</code></p>

              <p>Codepen Example:</p>
              <p data-height="550" data-theme-id="6688" data-slug-hash="XzJbjQ" data-default-tab="js,result" data-user="rbiggs" data-embed-version="2" data-pen-title="Composi state-5" class="codepen">See the Pen <a href="https://codepen.io/rbiggs/pen/XzJbjQ/">Composi state-5</a> by <NAME> (<a href="https://codepen.io/rbiggs">@rbiggs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
              <p>Be aware that whatever the callback returns will be set as the component's new state. Therefore you will need to make whatever changes to the component's whole state before returning it.</p>
          <p>&nbsp;</p>
      </div>

      <aside>
        <menu>
          <ul class="docs__menu">
            <li class="docs__menu__item">
              <a href='./installation.html'>Installation</a>
            </li>
            <li class="docs__menu__item">
              <a href='./render.html'>Render</a>
            </li>
            <li class="docs__menu__item">
{'fraction_non_alphanumeric': 0.12838121934127542, 'fraction_numerical': 0.02025227750525578, 'mean_word_length': 3.107209670456181, 'pattern_counts': {'":': 0, '<': 573, '<?xml version=': 0, '>': 591, 'https://': 40, 'lorem ipsum': 0, 'www.': 4, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4284193', 'n_tokens_mistral': 8839, 'n_tokens_neox': 8450, 'n_words': 3113}